跨域，指的是欣賞器不能執(zhí)行其他網(wǎng)站的劇本。它是由欣賞器的同源計(jì)策造成的，是欣賞器對javascript施加的安詳限制。

所謂同源是指，域名，協(xié)議，端口溝通。欣賞器執(zhí)行javascript劇本時(shí)，會查抄這個(gè)劇本屬于誰人頁面，假如不是同源頁面，就不會被執(zhí)行。

同源計(jì)策的目標(biāo)，是防備黑客做一些做奸不法的運(yùn)動。好比說，東莞機(jī)房托管 ，假如一個(gè)銀行的一個(gè)應(yīng)用答允用戶上傳網(wǎng)頁，假如沒有同源計(jì)策，黑客可以編寫一個(gè)登岸表單提交到本身的處事器上，獲得一個(gè)看上去相當(dāng)高峻上的頁面。黑客把這個(gè)頁面通過郵件等發(fā)給用戶，用戶誤認(rèn)為這是某銀行的主網(wǎng)頁舉辦登岸，就會泄露本身的用戶數(shù)據(jù)。而因?yàn)樾蕾p器的同源計(jì)策，黑客無法收到表單數(shù)據(jù)。

此刻跟著RESTFUL的風(fēng)行，許多應(yīng)用提供http/https接口的API，通過xml/json名目對外提供處事，實(shí)現(xiàn)開放架構(gòu)。如，微博、微信、天氣預(yù)報(bào)、openstack等網(wǎng)站和應(yīng)用都提供restful接口。

Web應(yīng)用也在向單頁面偏向成長。

越來越多的web應(yīng)用此刻是這樣的架構(gòu)：

靜態(tài)單個(gè)web頁面

ajax挪用

RESTFUL處事

我們本可以操作各個(gè)網(wǎng)站提供的API，做出許多出色的Web應(yīng)用。但欣賞器執(zhí)行javascript時(shí)的跨域限制，就成為了這類開放架構(gòu)的攔路虎。

本文提出了一種簡樸有效的方法辦理跨域問題。

常用的跨域要領(lǐng)有這樣一些：

1，利用iFrame會見另一個(gè)域。 然后再從另一個(gè)頁面讀取iFrame的內(nèi)容。jquery等有一些封裝。

聽說Firefox等大概不支持讀取另一個(gè)iFrame的內(nèi)容。

2，jsonp。需要處事器支持。利用script src動態(tài)獲得一段java代碼。是回調(diào)頁面上的js函數(shù)，參數(shù)是一個(gè)json工具。

jquery也有封裝。

3，配置http頭，Access-Control-Allow-Origin：*

但聽說IE有一些版本不識別這個(gè)http頭。

4，處事器署理。如，處事器寫一個(gè)url的處理懲罰action。其參數(shù)是一個(gè)url。這個(gè)處事器會用參數(shù)拼湊一個(gè)url,用httpclient庫去執(zhí)行url，然后把讀取的內(nèi)容再輸出到http客戶端。

上面提到的這些跨域要領(lǐng)，都有一些問題。有的不能支持所有欣賞器，有的需要修改javascript代碼，有的需要重寫處事器端代碼。有的在session等場景下會有問題。

其實(shí)，用nginx反向署理實(shí)現(xiàn)跨域，是最簡樸的跨域方法。只需要修改nginx的設(shè)置即可辦理跨域問題，支持所有欣賞器，支持session，不需要修改任何代碼，而且不會影響處事器機(jī)能。

我們只需要設(shè)置nginx，在一個(gè)處事器上設(shè)置多個(gè)前綴來轉(zhuǎn)發(fā)http/https請求到多個(gè)真實(shí)的處事器即可。這樣，這個(gè)處事器上所有url都是溝通的域名、協(xié)議和端口。因此，對付欣賞器來說，這些url都是同源的，沒有跨域限制。而實(shí)際上，這些url實(shí)際上由物理處事器提供處事。這些處事器內(nèi)的javascript可以跨域挪用所有這些處事器上的url。

下面，給出一個(gè)nginx支持跨域的例子，舉辦詳細(xì)說明。

如，我們有兩個(gè)pythonflask開拓的項(xiàng)目：testFlask1和testFlask2。

testFlask2項(xiàng)目上的javascript劇本要通過ajax方法挪用testFlask1的一個(gè)url，獲取一些數(shù)據(jù)。

正常環(huán)境下陳設(shè)，就會有跨域問題，欣賞器拒絕執(zhí)行如下這樣的挪用。

$("button").click(function () {
    $.get("127.0.0.1:8081/partners/json", function (result) {
        $("div").html(result);
    });
});

下面把testFlask2項(xiàng)目標(biāo)javascrip文件修改一下。這樣會見同源的url，就不會有跨域問題。

$("button").click(function () {
    $.get("partners/json", function (result) {
        $("div").html(result);
    });
});

可是，我們testFlask2項(xiàng)目實(shí)際上沒有partners/json這樣的url，那怎么處理懲罰呢？

我們這樣編寫nginx的設(shè)置文件：