1. 同源策略
- 是瀏覽器安全策略
- 協(xié)議名术瓮，域名，端口號必須完全一致
| 當(dāng)前頁面url | 被請求頁面url | 是否跨域 | 原因 |
|---|---|---|---|
| http://www.test.com/ | http://www.test.com/index.html | 否 | 同源（協(xié)議啡邑、域名、端口號相同） |
| http://www.test.com/ | https://www.test.com/index.html | 跨域 | 協(xié)議不同（http/https） |
| http://www.test.com/ | http://www.baidu.com/ | 跨域 | 主域名不同（test/baidu） |
| http://www.test.com/ | http://blog.test.com/ | 跨域 | 子域名不同（www/blog） |
| http://www.test.com:8080/ | http://www.test.com:7001/ | 跨域 | 端口號不同（8080/7001） |
2. 非同源限制
- 無法讀取非同源網(wǎng)頁的Cookie井赌，LocalStorage 和 IndexedDB
- 無法接觸非同源網(wǎng)頁的 DOM
- 無法向非同源地址發(fā)送 AJAX 請求
3. 跨域
- 違背同源策略就會產(chǎn)生跨域
4. 解決跨域問題
方法一 document.domain 解決非同源網(wǎng)頁的 Cookie問題
因?yàn)闉g覽器是通過document.domain屬性來檢查兩個頁面是否同源谤逼，因此只要通過設(shè)置相同的document.domain，兩個頁面就可以共享Cookie
（此方案僅限主域相同仇穗，子域不同的跨域應(yīng)用場景流部。）
// 兩個頁面都設(shè)置
document.domain = 'test.com';
方法二 跨文檔通信 API：window.postMessage()
調(diào)用postMessage方法實(shí)現(xiàn)父窗口http://test1.com向子窗口http://test2.com發(fā)消息（子窗口同樣可以通過該方法發(fā)送消息給父窗口）
它可用于解決以下方面的問題：
- 頁面和其打開的新窗口的數(shù)據(jù)傳遞
- 多窗口之間消息傳遞
- 頁面與嵌套的iframe消息傳遞
- 上面三個場景的跨域數(shù)據(jù)傳遞
// 父窗口打開一個子窗口
var openWindow = window.open('http://test2.com', 'title');
// 父窗口向子窗口發(fā)消息(第一個參數(shù)代表發(fā)送的內(nèi)容，第二個參數(shù)代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');
調(diào)用message事件仪缸，監(jiān)聽對方發(fā)送的消息
// 監(jiān)聽 message 消息
window.addEventListener('message', function (e) {
console.log(e.source); // e.source 發(fā)送消息的窗口
console.log(e.origin); // e.origin 消息發(fā)向的網(wǎng)址
console.log(e.data); // e.data 發(fā)送的消息
},false);
方法三 JSONP
JSONP最大特點(diǎn)就是簡單適用贵涵，兼容性好（兼容低版本IE），缺點(diǎn)是只支持get請求恰画，不支持post請求宾茂。
核心思想：
網(wǎng)頁通過添加一個<script>元素，向服務(wù)器請求 JSON 數(shù)據(jù)拴还，服務(wù)器收到請求后跨晴，將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)的參數(shù)位置傳回來。
- 原生實(shí)現(xiàn)
<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服務(wù)器test.com發(fā)出請求片林，該請求的查詢字符串有一個callback參數(shù)端盆，用來指定回調(diào)函數(shù)的名字
// 處理服務(wù)器返回回調(diào)函數(shù)的數(shù)據(jù)
<script type="text/javascript">
function dosomething(res){
// 處理獲得的數(shù)據(jù)
console.log(res.data)
}
</script>
- Jquery ajax
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get',
dataType: 'jsonp', // 請求方式為jsonp
jsonpCallback: "handleCallback", // 自定義回調(diào)函數(shù)名
data: {}
});
- Vue.js
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
方法三 CORS
CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標(biāo)準(zhǔn)费封，屬于跨源 AJAX 請求的根本解決方法焕妙。
普通跨域請求：只需服務(wù)器端設(shè)置Access-Control-Allow-Origin
帶cookie跨域請求：前后端都需要進(jìn)行設(shè)置
參考文章：
https://blog.csdn.net/qq_38128179/article/details/84956552
