跨域處理

首先了解下瀏覽器的同源策略

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

那麼怎樣解決跨域問題的呢？

1 通過jsonp跨域，原生實現：

<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參並指定回調執行函數爲onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回調執行函數
function onBack(res) {
    alert(JSON.stringify(res));
}
</script>

2、document.domain + iframe 跨域

此方案僅限主域相同，子域不同的跨域應用場景。

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';var user = 'admin';
</script>

2.）子窗口：(http://child.domain.com/b.html)

<script>
document.domain = 'domain.com';
// 獲取父窗口中變量
alert('get js data from parent ---> ' + window.parent.user);
</script>

弊端：請看下面渲染加載優化

3、nginx 代理跨域

4、nodejs 中間件代理跨域

5、後端在頭部信息裏面設置安全域名