什么是跨域（Cross-site)？

想了解跨域门驾，必須先了解一下“同源策略(same origin policy)”呐赡。

同源策略

它是由Netscape提出的一個(gè)著名的安全策略∏阒ィ現(xiàn)在所有支持JavaScript 的瀏覽器都會(huì)使用這個(gè)策略憔涉。它限制了某個(gè)域下的文檔或者js與另一個(gè)域中的資源交互的方式订框，它提供了一種安全機(jī)制，這種安全機(jī)制可以避免來(lái)自惡意網(wǎng)站的攻擊兜叨。 同源策略要求瀏覽器當(dāng)且僅當(dāng)兩個(gè)頁(yè)面來(lái)自相同的域才允許其中一個(gè)網(wǎng)頁(yè)上的js請(qǐng)求另一個(gè)網(wǎng)頁(yè)的數(shù)據(jù)

什么是域(origin)穿扳？

域是由三部分組合而成：

• URI Schema（協(xié)議類型），
• host name（域名）,
• port number（端口號(hào)）

舉個(gè)例子：

• 1） http://www.domain.com 這個(gè)頁(yè)面浪腐，
  URI Schema是http, host name是www.domain.com,port; number是默認(rèn)的80
• 2） https://www.xxx.com:8080/xxx/yyy
  URI Schema是https纵揍，host name 是www.xxx.com，port number是8080
  由于1）和2）中的三部分都不相同议街，所以它們就是不同的域。 下面的圖更好的解釋了什么是同域

為什么要有同源策略？

提出同源策略的目的是出于安全性考慮骨杂，它能夠阻止來(lái)自惡意網(wǎng)站的腳本通過(guò)其他網(wǎng)站的DOM獲取其他網(wǎng)站的信息涂身。可以避免CSRF和XSS攻擊搓蚪。

同源策略限制了啥蛤售？

• 同源策略限制的是瀏覽器或者其他提供類似瀏覽器服務(wù)的軟件，而且這僅僅是個(gè)規(guī)范；
• 同源策略只是限制JavaScript悴能，而圖片揣钦，css這些是不存在同源策略限制的。

什么是跨域漠酿？

在A網(wǎng)站的頁(yè)面上通過(guò)js請(qǐng)求B網(wǎng)站的數(shù)據(jù)冯凹，如果A和B兩個(gè)網(wǎng)站不滿足同源策略，那么就存在跨域問(wèn)題炒嘲。

為什么會(huì)有跨域問(wèn)題宇姚？

由于在實(shí)際環(huán)境中，經(jīng)常需要通過(guò)js獲取一些數(shù)據(jù)夫凸，特別是ajax的流行浑劳，通過(guò)ajax加載某個(gè)網(wǎng)站的數(shù)據(jù)的場(chǎng)景就會(huì)經(jīng)常遇到，而一旦有這樣的需求夭拌，就可能會(huì)出現(xiàn)跨域的問(wèn)題魔熏。

如何判斷我是否遇到了跨域問(wèn)題？

一般來(lái)講啼止，如果你的請(qǐng)求被同源策略限制道逗，瀏覽器的開(kāi)發(fā)工具都會(huì)給出錯(cuò)誤提示，在Chrome瀏覽器的console中献烦，可能會(huì)有類似下面的提示

如何解決跨域問(wèn)題滓窍？

1、Jsonp方式

什么是JSONP?

JSONP(JSON with Padding)是一個(gè)非官方的協(xié)議巩那，它允許在服務(wù)器端集成Script tags返回至客戶端吏夯，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）。

JSONP有什么用即横？

由于同源策略的限制噪生，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議东囚、端口）的資源跺嗽，為了實(shí)現(xiàn)跨域請(qǐng)求，可以通過(guò)script標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求页藻，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)桨嫁，從而解決了跨域的數(shù)據(jù)請(qǐng)求。

如何使用JSONP份帐？

下邊這一DEMO實(shí)際上是JSONP的簡(jiǎn)單表現(xiàn)形式璃吧，在客戶端聲明回調(diào)函數(shù)之后，客戶端通過(guò)script標(biāo)簽向服務(wù)器跨域請(qǐng)求數(shù)據(jù)废境，然后服務(wù)端返回相應(yīng)的數(shù)據(jù)并動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)畜挨。

【html示例代碼一】

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        //alert(result);  
        for(var i in result) {  
            alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.  
        }  
    }  
    var JSONP=document.createElement("script");  
    JSONP.type="text/javascript";  
    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
    document.getElementsByTagName("head")[0].appendChild(JSONP);  
</script>  

【html示例代碼二】

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        alert(result.a);  
        alert(result.b);  
        alert(result.c);  
        for(var i in result) {  
            alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.  
        }  
    }  
</script>  
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

【js示例代碼一】

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.getJSON("http://crossdomain.com/services.php?callback=?",  
    function(result) {  
        for(var i in result) {  
            alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.  
        }  
    });  
</script>  

【js示例代碼二】

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.ajax({  
        url:"http://crossdomain.com/services.php",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);//循環(huán)輸出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>  

【js示例代碼三】

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');  
</script>

Jsonp原理：

首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器筒繁。
此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)巴元。
然后以 javascript 語(yǔ)法的方式毡咏，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中务冕，這樣就生成了一段 js 語(yǔ)法的文檔血当，返回給客戶端。
客戶端瀏覽器禀忆，解析script標(biāo)簽臊旭，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)箩退，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）

2离熏、設(shè)置document.domain屬性

如果兩個(gè)頁(yè)面或者frame可以將document.domain屬性設(shè)置成相同的值，那么也可以繞過(guò)同源策略限制戴涝。 假設(shè)兩個(gè)頁(yè)面分別是static.demo.com和server.demo.com滋戳，兩個(gè)頁(yè)面加載之后都通過(guò)js將document.domain設(shè)置成demo.com，這樣接下來(lái)的ajax請(qǐng)求就可以繞過(guò)同源策略限制了啥刻。
但是：如果兩個(gè)頁(yè)面存在端口奸鸯，比如static.demo.com:8080 和 server.demo.com:8090，由于document.domain只能設(shè)置域名可帽，所以就不起作用娄涩。
這種方法針對(duì)頁(yè)面，如果服務(wù)端返回的是json,而不是一個(gè)頁(yè)面映跟，所以沒(méi)法將自己的域名設(shè)置成demo.com,但是可以通過(guò)另外一種方式蓄拣，即在服務(wù)端增加一個(gè)靜態(tài)頁(yè)面，頁(yè)面中放如下js代碼：

document.domain=demo.com

或者如下代碼:

try{document.domain = window.location.hostname.split('.').reverse().slice(0,2).reverse().join('.');}catch(e){}

然后客戶端頁(yè)面加載的時(shí)候先去調(diào)用一下這個(gè)靜態(tài)頁(yè)面就好了努隙。

3球恤、 CORS(Cross-Origin Resource Sharing)

原理MDN上講的更清楚一些，點(diǎn)擊這里荸镊。
其實(shí)簡(jiǎn)單來(lái)說(shuō)就是服務(wù)端在響應(yīng)頭中添加一個(gè)Access-Control-Allow-Origin 頭部咽斧，頭部的值為客戶端的域名，比如:http://static.demo.com躬存，

這樣就可以了收厨。但是需要注意的是:CROS分為兩種，一種是簡(jiǎn)單請(qǐng)求优构，一種是復(fù)雜請(qǐng)求，簡(jiǎn)單請(qǐng)求按照上面的方式是可以的雁竞，如果是復(fù)雜請(qǐng)求钦椭，瀏覽器會(huì)進(jìn)行兩步拧额，先發(fā)一個(gè)options請(qǐng)求，這個(gè)請(qǐng)求稱之為“預(yù)請(qǐng)求”彪腔，預(yù)請(qǐng)求實(shí)際上是個(gè)OPTIONS請(qǐng)求侥锦，類似于一個(gè)探測(cè)作用，如果服務(wù)端返回的頭部通過(guò)了預(yù)請(qǐng)求的內(nèi)容德挣，則瀏覽器才會(huì)發(fā)起第二個(gè)真實(shí)請(qǐng)求恭垦。

4、客戶端請(qǐng)求通過(guò)Nginx轉(zhuǎn)發(fā)

原理：客戶端的所有請(qǐng)求都直接發(fā)到客戶端所在域名下格嗅，但是在客戶端服務(wù)器增加一臺(tái)nginx服務(wù)器番挺，作為反向代理，如果是后端的url屯掖，直接代理轉(zhuǎn)發(fā)到服務(wù)端玄柏，這樣就不存在前端的跨域問(wèn)題了。

nginx配置如下

server {
    listen       80;
    server_name  static.demo.com;    #可配置多個(gè)主機(jī)頭
    charset utf-8,gbk,gb2312,gb18030; #可以實(shí)現(xiàn)多種編碼識(shí)別

    location / {
        root   /home/wy/www/static.demo.com/ROOT;  #網(wǎng)站文件路徑

        autoindex on;
        autoindex_exact_size off;
        autoindex_localtime on;
        index  default.html;
    }
    #所有/server/開(kāi)頭的請(qǐng)求都會(huì)走這里
    location /server/ {
            proxy_pass http://server.demo.com:8080;  ##轉(zhuǎn)發(fā)到server
            proxy_set_header    Host             $host;
            proxy_set_header    X-Real-IP        $remote_addr;
            proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
}

參考文章

https://my.oschina.net/jasonultimate/blog/550737

http://justcoding.iteye.com/blog/1366102/