跨域
當(dāng)兩個域不同時，基于同源策略資源將不能共享。而采用技術(shù)使得不同域的網(wǎng)站能資源交互的方式叫跨域
怎么跨域
1.JSONP
借助的是script標(biāo)簽有能力不受限制從其他域加載資源，通過script標(biāo)簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的回調(diào)函數(shù)，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入
舉個例子，服務(wù)器希望有個叫callback的參數(shù)來啟用JSONP的功能。我們的請求如下
http://www.example.net/sample.aspx?callback=mycallback
如果沒有JSONP，可能返回的是JS對象
{ foo: 'bar' }
但有JSONP的話，服務(wù)器一旦接受到叫callback的參數(shù),就會把JS對象包含在函數(shù)調(diào)用中返回
mycallback({ foo: 'bar' })
你會發(fā)現(xiàn)，將調(diào)用mycallback，所以你在頁面里需要定義mycallback函數(shù)
mycallback = function(data){
alert(data.foo);//'bar'
};
當(dāng)script載入成功后會執(zhí)行mycallback，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入
優(yōu)點
- 兼容性更好，在更加古老的瀏覽器中都可以運行，并且在請求完畢后可以通過調(diào)用callback的方式回傳數(shù)據(jù)。
缺點
- 只支持GET請求而不支持其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調(diào)用的問題
2.CORS
For simple CORS requests, the server only needs to add the following header to its response: Access-Control-Allow-Origin: *，如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進行跨域的訪問
舉個例子，CORS on ExpressJS
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Access-Control-Allow-Origin：
該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求。
優(yōu)點
JSONP只能實現(xiàn)GET請求，而CORS支持所有類型的HTTP請求。
使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯誤處理。
支持cookie
缺點
- 兼容性 ：JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS
demo及學(xué)習(xí)鏈接
JSONP-demo
CORS-demo
jsonp 介紹
cors 應(yīng)用
每天都努力一點點
謝謝你看完
