跨域概念介紹
為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù),引入了同源政策。同源指協(xié)議、域名、端口三者相同，同源政策就是限制非同源訪問測策略。
隨著互聯(lián)網(wǎng)的發(fā)展，同源政策也越來越嚴格。目前非同源主要有如下三種限制：
- Cookie、LocalStorage 和 IndexDB 無法讀取;
- DOM 無法獲得;
- AJAX 請求不能發(fā)送;
非同源訪問引發(fā)的問題就是跨域訪問問題，有些時候需要跨域協(xié)調(diào)處理問題，那么如何解決呢？
cookie
- 保持兩個網(wǎng)站的 document.domain 相同，cookie即可以訪問
- 片段標識符：在父子窗口的場景可以通過片段標識符（location.hash）來修改或獲取信息。通過監(jiān)聽 hashchange 事件來獲取更新
- window.name 修改
- PostMessage
LocalStorage解決方案
- PostMessage
ajax
ajax和其它兩種跨域情況不一樣，前面兩種僅僅是獲取數(shù)據(jù)。ajax可以獲取數(shù)據(jù)，同時修改數(shù)據(jù)。我們可以通過三種方式來規(guī)避跨域問題。
- JSONP
- WebSocket
- CORS
JSONP 是通過動態(tài)添加一個腳本到頁面，通過回調(diào)函數(shù)來實現(xiàn)跨域ajax調(diào)用。其核心原理是將ajax調(diào)用修改為資源訪問，將調(diào)用權(quán)限賦給對方；由對方使用回調(diào)函數(shù)處理。
window.onload = function () {
addScriptTag('http://mydemo.com/jsonp?callback=foo');
}
function jsonpCallback(jsonpresult) {
console.log(jsonpresult);
}
WebSocket 是一種操作tcp/udp的實現(xiàn)方式，通過底層通信技術(shù)解決通信問題。
CORS是跨源資源分享（Cross-Origin Resource Sharing）的縮寫。它是W3C標準，是跨源AJAX請求的根本解決方法。相比JSONP只能發(fā)GET請求，CORS允許任何類型的請求。
不管哪種解決方案，都需要服務(wù)提供者和客戶端兩種同時做改造。
form表單提交會發(fā)生跨域嗎？
我們的域名是 www.demo.com ，如下代碼會發(fā)生跨域嗎？
<form action="http://baidu.com" method="post" id="myForm">
<input name="demo" id="demo" value="aaa">
<input name="sign" id="sign" value="aaa">
<button v-on:click="submitFile($event)">submit</button>
</form>
這里既沒有獲取cookie、也沒有獲取dom、更沒有ajax調(diào)用，所以沒有跨域。
