跨域:

瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能呼叫b.cn中的js,物件或資料(因為a.cn和b.cn是不同域),所以跨域就出現了.

上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,埠相同,協議相同

同源策略:

請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.

jsonp跨域：

我們來簡單的模擬一下JSONP的通訊過程。

function handleResponse(response) {
    console.log(response.data);
}
var script = document.createElement("script");
script.src = "http://example.com/jsonp/getSomething?uid=123&callback=hadleResponse"
document.body.insertBefore(script, document.body.firstChild);
 

它的過程是這樣子的：

1. 當我們通過新建一個script標籤請求時，後臺會根據相應的引數來生成相應的JSON資料。比如說上面這個連結，傳遞了handleResponse給後臺，然後後臺根據這個引數再結合資料生成了handleResponse({"data": "hey"})。
2. 緊接著，這個返回的JSON資料其實就可以被當成一個js指令碼，就是對一個函式的呼叫。
3. 由於我們事先已經聲明瞭這麼一個回撥函式，於是當資源載入進來的時候，直接就對函式進行呼叫，於是資料當然就能獲取到了。
4. 至此，跨域通訊完成。

另外，想要實現JSONP，後臺伺服器也必須做相應的設定。

值得一提的是，JSONP是存在一定的侷限性的：

• 只能用於GET請求
• 存在安全問題，請求程式碼中可能存在安全隱患
• 要確定JSONP請求是否失敗並不容易

在superagent中使用JSONP

import jsonp from 'superagent-jsonp'
import superagent from 'superagent';


superagent.get('https://apis.map.qq.com/ws/geocoder/v1/')
            .use(jsonp({timeout: 1000}))
            .query({location:latitude+','+longitude,key:'4DXBZ-4UTK3-HEW32-3R2XX-ZDTJQ-GNFN7'})
            .query({output: 'jsonp'})
            .end(callback)
 

如果出現superagentCallback is not defined ；一般上是瀏覽器回收了請求機制：只要改變 .use(jsonp({timeout: 1000}))的值就可以了；