- 為什么會(huì)有跨域問題？
因?yàn)闉g覽器的同源策略- 同源策略是什么篮条？
協(xié)議弟头，域名，端口都相同- 如果非同源涉茧，會(huì)受到什么限制赴恨？
（1） Cookie、LocalStorage 和 IndexDB 無法讀取
（2） DOM 無法獲得
（3） AJAX 請(qǐng)求不能發(fā)送
怎樣解決非同源發(fā)送請(qǐng)求伴栓，也就是跨域問題呢伦连，有以下幾種方法
CORS
- 客戶端可以使用XMLHttpRequest發(fā)送請(qǐng)求，請(qǐng)求路徑為絕對(duì)路徑挣饥，服務(wù)端返回的數(shù)據(jù)在
xhr.responseText中 - 如果服務(wù)器認(rèn)為可以接受除师，就在
Access-Control-Allow-Origin中返回相應(yīng)的源或 * - 克服了AJAX只能同源使用的限制
res.header("Access-Control-Allow-Origin", "*");
JSONP
- 通過使用動(dòng)態(tài)
<script>實(shí)現(xiàn)跨域，在url中指定回調(diào)函數(shù) - 能直接訪問響應(yīng)文本扔枫，支持瀏覽器和服務(wù)器的雙向通信
script.src = "http://www.baidu.com/?callback=handleResponse"
function handleResponse(res){
//res是服務(wù)端返回的數(shù)據(jù)
}
類似的還有 圖像Ping汛聚，因?yàn)橐粋€(gè)網(wǎng)頁(yè)可以從任何網(wǎng)頁(yè)中加載圖片，不用擔(dān)心跨域問題短荐，所以倚舀，凡是擁有src這個(gè)屬性的標(biāo)簽都擁有跨域的能力，缺點(diǎn)是無法訪問響應(yīng)文本忍宋，適用于瀏覽器和服務(wù)器間的單向通信
let img = new Image();
img.src = "http://"
兩者的區(qū)別
-
JSONP是Jquery提供的跨域方式痕貌，JSONP只支持get方式的請(qǐng)求 -
CORS是W3C提供的一個(gè)跨域標(biāo)準(zhǔn) ，CORS支持所有類型的http請(qǐng)求
