[掘金](https://juejin.im/entry/5b4d4721f265da0f926b78c8?utm_source=gold_browser_extension) [跨域對接方法總結](https://www.cnblogs.com/CccZss/p/8571115.html) [瀏覽器的同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy) [http://www.cnblogs.com/2050/p/3191744.html](http://www.cnblogs.com/2050/p/3191744.html) [http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html](http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html) # 同源策略 如果兩個頁面的協議，端口（如果有指定）和域名都相同，則兩個頁面具有相同的源 下表給出了相對[http://store.company.com/dir/page.html同源檢測的示例](http://store.company.com/dir/page.html同源檢測的示例): | URL | 結果 | | :--- | :--- | | [https://store.company.com/secure.html](https://store.company.com/secure.html) | 不同協議 \( https和http \) | | [http://store.company.com:81/dir/etc.html](http://store.company.com:81/dir/etc.html) | 不同端口 \( 81和80\) | | [http://news.company.com/dir/other.html](http://news.company.com/dir/other.html) | 不同域名 \( news和store \) | IE: 當涉及到同源策略時，Internet Explorer 有兩個主要的不同點: * 授信范圍（Trust Zones）：兩個相互之間高度互信的域名，如公司域名（corporate domains），不遵守同源策略的限制。 * 端口：IE 未將端口號加入到同源策略的組成部分之中，因此 [http://company.com:81/index.html](http://company.com:81/index.html) 和[http://company.com/index.html](http://company.com/index.html) 屬于同源并且不受任何限制。 * jsonp 只能在get請求上 ``` 實現原理是使用script的跨域加載 ``` * CORS [http://www.ruanyifeng.com/blog/2016/04/cors.html](http://www.ruanyifeng.com/blog/2016/04/cors.html) * 代理 * 使用HTML5中新引進的window.postMessage方法來跨域傳送數據 ``` A和B倆個跨域的窗口 a向b發送信息， window.postMessage("data",'http://B.com'); window 是b窗口的window 在窗口b中監聽 window.addEventListener('message', function(event) { console.log(event.origin); console.log(event.source); console.log(event.data); }, false); ``` * websocket * 使用window.name來進行跨域 * 通過修改document.domain來跨子域 localstorage和indexDB以源進行分割，每個源都擁有自己單獨的存儲空間。Cookies 使用不同的源定義方式。一個頁面可以為本域和任何父域設置cookie，只要是父域不是公共后綴（public suffix）即可，瀏覽器都允許給定的域以及其任何子域名\(sub-domains\) 訪問 cookie dom無法獲取，ajax請求不能發送 ## 前后端通信 1. ajax 2. websocket 3. cors