1、跨域是什么
// 我們在html接口請求中沫换，有時(shí)候會報(bào)下面的錯誤
Access to XMLHttpRequest at 'https://www.imooc.com' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
域指的是域名，向一個域發(fā)送請求最铁，如果請求的域和當(dāng)前域是不同域讯赏，就叫跨域；不同域之間的請求就叫跨域請求
2冷尉、什么是不同域漱挎，什么是同域
https://www.imooc.com:443/course/list
在上面的url地址中：
https：協(xié)議
www.imooc.com：域名
443：端口號
/course/list：路徑
協(xié)議、域名雀哨、端口號磕谅，任何一個不一樣，就是不同域
反之雾棺，則是同域怜庸，與路徑無關(guān)，路徑不一樣無所謂
3垢村、跨域請求為什么會被阻止
阻止跨域請求割疾，其實(shí)是瀏覽器本身的一種安全策略：
同源策略；
所謂同源策略嘉栓，是指出于安全考略宏榕，瀏覽器只允許同域下的url地址訪問同域下的url地址
跨域是瀏覽器本身的鍋，其它客戶端或者服務(wù)器都不存在跨域被阻止的問題
4侵佃、跨域解決方案
跨域問題前端無法解決麻昼，只能靠后端人員解決。當(dāng)出現(xiàn)跨域問題時(shí)馋辈，前端人員唯一能做的就是告訴后端人員我要跨域抚芦，剩下的工作交給后端去完成（在響應(yīng)頭中添加字段：Access-Control-Allow-Origin:*）
（1）CORS跨域資源共享
// 在 響應(yīng)頭 Response Headers 中添加
// 表明允許所有的域名來跨域請求它，*是通配符迈螟，沒有任何限制
Access-Control-Allow-Origin: *
// 只允許指定域名的跨域請求
Access-Control-Allow-Origin: http://192.168.0.100:5500
使用 CORS 跨域的過程
① 瀏覽器發(fā)送請求
② 后端在響應(yīng)頭中添加Access-Control-Allow-Origin頭信息
③ 瀏覽器接收到響應(yīng)
④ 如果是同域下請求叉抡，瀏覽器不會額外做什么，這次前后端通信就圓滿完成了
⑤ 如果是跨域請求答毫，瀏覽器會從響應(yīng)頭中查找是否允許跨域訪問
⑥ 如果允許跨域褥民，通信圓滿完成
⑦ 如果沒找到或不包含想要跨域的域名，就丟棄響應(yīng)結(jié)果
CORS兼容性：IE10 及以上版本的瀏覽器可以正常使用 CORS
關(guān)于瀏覽器兼容性推薦網(wǎng)址：https://caniuse.com
（2）JSONP
原理：
scrip標(biāo)簽跨域不會被瀏覽器阻止
JSONP主要就是利用scrip標(biāo)簽洗搂，加載跨域文件
// 聲明函數(shù)
<script>
const handleResponse = data => {
console.log(data)
};
</script>
// 方式一：手動加載JSONP接口
<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>
// 方式二：動態(tài)加載JSONP接口
const script = document.createElement('script');
script.src = 'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
document.body.appendChild(script);
