最简朴实现跨域的要领：利用nginx反向署理

跨域，指的是欣赏器不能执行其他网站的剧本。它是由欣赏器的同源计策造成的，是欣赏器对javascript施加的安详限制。

所谓同源是指，域名，协议，端口沟通。欣赏器执行javascript剧本时，会查抄这个剧本属于谁人页面，假如不是同源页面，就不会被执行。

同源计策的目标，是防备黑客做一些做奸不法的运动。好比说，假如一个银行的一个应用答允用户上传网页，假如没有同源计策，黑客可以编写一个登岸表单提交到本身的处事器上，获得一个看上去相当高峻上的页面。黑客把这个页面通过邮件等发给用户，用户误认为这是某银行的主网页举办登岸，就会泄露本身的用户数据。而因为欣赏器的同源计策，黑客无法收到表单数据。

此刻跟着RESTFUL的风行，许多应用提供http/https接口的API，通过xml/json名目对外提供处事，实现开放架构。如，微博、微信、天气预报、openstack等网站和应用都提供restful接口。

Web应用也在向单页面偏向成长。

越来越多的web应用此刻是这样的架构：

静态单个web页面

ajax挪用

RESTFUL处事

我们本可以操作各个网站提供的API，做出许多出色的Web应用。但欣赏器执行javascript时的跨域限制，就成为了这类开放架构的拦路虎。

本文提出了一种简朴有效的方法办理跨域问题。

常用的跨域要领有这样一些：

1，利用iFrame会见另一个域。然后再从另一个页面读取iFrame的内容。jquery等有一些封装。

听说Firefox等大概不支持读取另一个iFrame的内容。

2，jsonp。需要处事器支持。利用scriptsrc动态获得一段java代码。是回调页面上的js函数，参数是一个json工具。

jquery也有封装。

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

但听说IE有一些版本不识别这个http头。

4，处事器署理。如，处事器写一个url的处理惩罚action。其参数是一个url。这个处事器会用参数拼凑一个url,用httpclient库去执行url，然后把读取的内容再输出到http客户端。

上面提到的这些跨域要领，都有一些问题。有的不能支持所有欣赏器，有的需要修改javascript代码，有的需要重写处事器端代码。有的在session等场景下会有问题。

其实，用nginx反向署理实现跨域，是最简朴的跨域方法。只需要修改nginx的设置即可办理跨域问题，支持所有欣赏器，支持session，不需要修改任何代码，而且不会影响处事器机能。

我们只需要设置nginx，在一个处事器上设置多个前缀来转发http/https请求到多个真实的处事器即可。这样，这个处事器上所有url都是沟通的域名、协议和端口。因此，对付欣赏器来说，这些url都是同源的，没有跨域限制。而实际上，，这些url实际上由物理处事器提供处事。这些处事器内的javascript可以跨域挪用所有这些处事器上的url。

下面，给出一个nginx支持跨域的例子，举办详细说明。

如，我们有两个pythonflask开拓的项目：testFlask1和testFlask2。

testFlask2项目上的javascript剧本要通过ajax方法挪用testFlask1的一个url，获取一些数据。

正常环境下陈设，就会有跨域问题，欣赏器拒绝执行如下这样的挪用。

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

$("button").click(function () {

$.get("127.0.0.1:8081/partners/json", function (result) {

$("div").html(result);

});

});

下面把testFlask2项目标javascrip文件修改一下。这样会见同源的url，就不会有跨域问题。

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

$("button").click(function () {

$.get("partners/json", function (result) {

$("div").html(result);

});

});

可是，我们testFlask2项目实际上没有partners/json这样的url，那怎么处理惩罚呢？

我们这样编写nginx的设置文件：