欢迎来到梦飞科技

服务器租用

当前优惠活动:

最简朴实现跨域的要领:利用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。需要处事器支持。利用script src动态获得一段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的设置文件:

 

梦飞科技 - 全球数据中心基础服务领先供应商

Copyright © 2003-2019 MFISP.COM. 国外服务器租用 IDC公司 版权所有 粤ICP备11019662号