?這是一個老生常談的問題了犁享，幾乎面試必問吧，譬如問到什么是跨域氨荨炊昆？怎么解決跨域啊威根？那種方案比較好胺锞蕖？因為的確是日常開發(fā)中不可避免的問題洛搀，我自己也經(jīng)常會遇到敢茁，但每次把問題了解決后都沒好好的總結(jié)，猶如過眼煙云姥卢，所以下面我從自己的角度來總結(jié)一下這幾個問題卷要。
一、什么是跨域
URL的組成：
協(xié)議 + 子域名+主域名+端口號+資源地址
當(dāng)A 頁面 URL 的 協(xié)議独榴、子域名僧叉、主域名、端口號 和 B URL 的?協(xié)議棺榔、子域名瓶堕、主域名、端口號有一個不同時再相互請求就會產(chǎn)生跨域問題 症歇，瀏覽器的XMLHttpRequest?會自動屏蔽掉不允許發(fā)送到服務(wù)端郎笆。只有當(dāng)他們都相同時就是同源，瀏覽器只支持同源策略下相互請求忘晤，這是一個很安全的理念宛蚓，保證了用戶信息的安全，防止惡意的網(wǎng)址竊取數(shù)據(jù)设塔。
二凄吏、解決方案
1. cors請求(推薦指數(shù)5顆星)
cors需要瀏覽器和服務(wù)器同時支持，目前ie10以下不支持闰蛔。
使用
客戶端不需要什么改造痕钢。
服務(wù)器：只需要設(shè)置2個服務(wù)器頭。
需要在header 中設(shè)置Access-Control-Allow-Origin：*;后面有個*星號序六，*就是所有域都可以訪問
可以支持多種請求方式任连，不限于get
2.jsonp (推薦指數(shù)4顆星)
基本原理就是通過動態(tài)創(chuàng)建script標(biāo)簽,然后利用src屬性進行跨域。
這么說比較模糊例诀，我們來看個例子:
// 定義一個函數(shù)
function f1(fata) {? ??
console.log(data);
};// 創(chuàng)建一個腳本随抠，并且告訴后端回調(diào)函數(shù)名叫fun
var body = document.getElementsByTagName('body')[0];
var script = document.gerElement('script');
script.type = 'text/javasctipt';
script.src = 'demo.js?callback=f1';?
body.appendChild(script);
這部分是jsonp 底層封裝實現(xiàn)裁着，如果A頁面請求B地址 不同源時，會把B地址轉(zhuǎn)換成script 的src? 來解決拱她，避免使用XMLHttpRequest? 不同源跨域問題
f1({"name": "name"})
分析一下用了jsonp返回的數(shù)據(jù)結(jié)構(gòu)跨算，會在json串外面包一層 f1( )，根據(jù)callback參數(shù)的值會直接執(zhí)行椭懊。所以就執(zhí)行了事先定義好的fun函數(shù)了，并且把數(shù)據(jù)傳入了進來步势。callback不指定時會隨機生成一個方法名氧猬。
客戶端設(shè)置:
服務(wù)端設(shè)置:
參考文章
https://www.cnblogs.com/starof/p/6434745.html
