元芳 ，Js 跨域之李代桃僵,你還看嗎？

跨域的方法大致有七計

javascript的同源策略

同源策略是指協議，主機和埠 相同，就是為同源，不管後面在跟什麼引數,否則都是跨域

個人覺得伺服器上設定代理頁面 或者設定跨域頭cros最方便

錦囊一

在伺服器上設定代理頁面 ，如果是有類似nginx 服務的話，可以配置nginx 反向代理，因為跨域只針對瀏覽器.

比如nginx.conf

server {
listen  80;
server_name localhost;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

location /mesos/ {
    rewrite ^/mesos(/.*)$ $1 break;
    proxy_pass 
}

location /marathon/ {
    rewrite ^/marathon(/.*)$ $1 break;
    proxy_pass 
}

error_page  404 /404.html;

error_page  500 502 503 504 /50x.html;
location = /50x.html {
    root    /usr/share/nginx/html;
}
}

錦囊二

設定跨域頭。
在responseHeader 裡面設定 Access-Control-Allow-Origin: *
Access - Control -Allow - credentials (請求的時候會帶上cookie)
Access-Control-Allow-Methods: POST, GET, OPTIONS,PUT, DELETE

比如node下定義箇中介軟體

module.exports.crossOrigin = function( req, res, next ) {

res.header( "Access-Control-Allow-Origin", "*" );

next();

};

錦囊三

Jsonp 是在客戶端生成1個callback回撥，之後透過script標籤把這個名稱發到伺服器端。伺服器端以javascript 語法的方式包裝一下json資料，生成1個函式呼叫，函式名稱是callback,客戶端解析script，並且執行返回的javascript文件。

jsonp.png

錦囊四

post+動態生成iframe是可以達到post跨域的目的、 form 表單提交是會重新整理當前頁面的。我們可以設定form 的target 屬性，1個隱藏的ifram，當post提交資料後，我們能在iframe中得到返回的結果，並且在iframe 操作js，其實幕後推手是iframe

錦囊五

透過修改document.domain來跨子域
將子域和主域的document.domain設為同一個主域.前提條件：這兩個域名必須屬於同一個基礎域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域

主域相同的使用document.domain

需要基礎域名相同
比如 a.baidu.com 和 b.baidu.com
document.domain=‘baidu.com’ 就可以跨域了。

domain.jpg

錦囊六

使用window.name來進行跨域

window
物件有個name
屬性，該屬性有個特徵：即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name
的，
每個頁面對window.name
都有讀寫的許可權，window.name
是持久存在一個視窗載入過的所有頁面中的

window.name侷限在於只能透過window.name 傳值，並且也是get 方式

window_name.jpg

錦囊七

使用HTML5中新引進的window.postMessage方法來跨域傳送資料

作者：二月長河
連結：