最简单实现跨域的方法：用 Nginx 反向代理 - Chen Jian - 博客园
随笔 - 458
什么是跨域
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行。
同源策略的目的，是防止黑客做一些做奸犯科的勾当。比如说，如果一个银行的一个应用允许用户上传网页，如果没有同源策略，黑客可以编写一个登陆表单提交到自己的服务器上，得到一个看上去相当高大上的页面。黑客把这个页面通过邮件等发给用户，用户误认为这是某银行的主网页进行登陆，就会泄露自己的用户数据。而因为浏览器的同源策略，黑客无法收到表单数据。
现在随着RESTFUL的流行，很多应用提供http/https接口的API，通过xml/json格式对外提供服务，实现开放架构。如，微博、微信、天气预报、openstack等网站和应用都提供restful接口。
Web应用也在向单页面方向发展。越来越多的web应用现在是这样的架构：
静态单个web页面
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客户端。
nginx反向代理实现跨域
上面提到的这些跨域方法，都有一些问题。有的不能支持所有浏览器，有的需要修改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);
下面把testFlask2项目的javascrip文件修改一下。这样访问同源的url，就不会有跨域问题。
$(&button&).click(function(){
$.get(&partners/json&,
function(result){
$(&div&).html(result);
但是，我们testFlask2项目实际上没有partners/json这样的url，那怎么处理呢？
我们这样编写nginx的配置文件：
listen8000;
location/ {
includeuwsgi_
uwsgi_passunix:/tmp/testFlask2.
location/partners {
rewrite^.+partners/?(.*)$ /$1
includeuwsgi_
uwsgi_passunix:/tmp/testFlask1.
我们把testFlask2项目部署在8080端口的根目录下。把提供web服务的testFlask1项目部署在/partners目录下。
但我们的testFlask1项目并不能处理/partners/json这样的url请求。那怎么办呢？
通过 rewrite^.+partners/?(.*)$ /$1 这一条命令，nginx可以把收到的/partners/*请求全部转为/*请求后再转发给背后的真实web服务器。
这样，RESTFUL的ajax客户端程序，只需要给出特定前缀的url就可以调用任意服务器提供的RESTFUL接口了。
甚至，通过nginx的反向代理，我们还能调用其他公司开发的网站提供的RESTFUL接口。
location/sohu {
rewrite^.+sohu/?(.*)$ /$1
includeuwsgi_
proxy_pass/;
我们就把sohu网站整个搬到我们的8080:/sohu/目录下了，我们的javascript就可以尽情调用其RESTFUL服务了。
顺便说一下，rewrite^.+sohu/?(.*)$ /$1 这句命令中，$1表示(.*)这个部分。第一对()内的参数是$1，第二对()内的参数就是$2，以此类推。
本文介绍了利用nginx的反向代理的功能，实现跨域访问任意应用和网站的方法。
nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。
通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。
对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。
这样，为了解决跨域问题，只需要动一下nginx配置文件即可。简单、强大、高效!
阅读(...) 评论()\ 使用nginx反向代理解决web api调用时产生的跨域问题
使用nginx反向代理解决web api调用时产生的跨域问题
Web前端工程师
爱吃新鲜美少女的大腿
作者的热门手记
使用ngnix解决web api调用时产生的跨域问题
在慕课网学习有半年多了，裸辞也有一个月了，在休息了小半个暑假之后，准备在家附近找个工作。第一次面试就进了，也算是转行成功，('')。
上班第一天，老板交给我个任务，简单来说就是调用数据服务商提供的webAPI，来获取数据，展示给业务人员，并存储到数据库中。不过目前公司就我一个做开发，是的，只有我一个“程序员”。初步研究，我觉得如果先不做数据库操作还是挺简单的。通过一个Ajax嵌套另一个Ajax就可以获取数据了，然后再呈现在网页上。
然后就出问题了。
为什么会出现options？
前台跨域get请求，由于CORS（cross origin resource share）规范的存在，浏览器会首先发送一次options嗅探，同时header带上origin，判断是否有跨域请求权限，服务器响应access control allow origin的值，供浏览器与origin匹配，如果匹配则正式发送get请求
XMLHttpReuest cannot load?
why nginx？
想了蛮多解决方案，然而被一一否决
通过后端调用接口，这样绕过浏览器获取数据，自然也不会有同源限制。然后，本公司就只有我一个人，想要快速实现，显然不现实
jsonp，然而api服务商并未提供
cros，同上，问了也没人回答
iframe，要依赖hack实现，响应数据量大时需要切片、多次设置fragment并轮询，响应频繁时可能失效，所以也被我抛弃
最后，通过大量的搜索，终于发现一个方法：nginx反向代理
nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
在nginx.conf中编辑
location / {
index.html index.
//允许cros跨域访问
add_header 'Access-Control-Allow-Origin' *;
//自定义本地路径
location /apis {
^.+apis/?(.*)$ /$1
然后我把项目部署在nginx的html根目录下，在ajax调用时设置url从/apixanalysis/mobile/grant/phone/smsCode/verify变为/apis/apixanalysis/mobile/grant/phone/smsCode/verify然后成功解决
nginx解决跨域问题，只需要修改一下配置文件即可。超方便简单
多思考，多用搜索引擎
相关标签：
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2反向代理（Apache、Nginx）解决JS跨域问题
作者：用户
本文讲的是反向代理（Apache、Nginx）解决JS跨域问题，
之前介绍了JSONP的跨域方式，那是利用前端方案解决跨域问题。跨域问题也可以用后端方案解决，比如CORS（Cross－Origin－Resource－Shares）、方向代理等。今天介绍下反向代理如何解决跨域问题。
之前介绍了JSONP的跨域方式，那是利用前端方案解决跨域问题。跨域问题也可以用后端方案解决，比如CORS（Cross－Origin－Resource－Shares）、方向代理等。今天介绍下反向代理如何解决跨域问题。
Apache和Nginx都可以实现反向代理，下面分别介绍下Apache和Nginx如何通过反向代理解决跨域问题。
Apache mod_proxy模块实现了代理／网关的功能，他实现了以下协议的代理－FTP、CONNECT（用于SSL）、HTTP0.9、HTTP1.0、HTTP1.1。此模块经过配置后可以通过以上协议或其它协议连接其它代理模块。
1、安装Apache Proxy_Http Server
vi /path/to/http.conf
//去调下面俩行的注释（＃）
#LoadModule proxy_module modules/mod_proxy.so
#LoadModule proxy_http_module modules/mod_proxy_http.so
2、配置转发规则
ProxyRequests Off
proxy_pass /api http://127.0.0.1:8602;
ProxyPassReverse /api http://127.0.0.1:8602;
proxy_set_header Host "192.168.60.31:8602";
proxy_set_header X-Forwarded-For $remote_
将api开头的请求转发到端口8602的端口服务上。
ProxyRequests Off 指令是指开启反向代理，对于客户端来说，他就是原始服务器，并且客户端不用进行特别的设置；而正向代理允许客户端通过它访问任何服务并隐藏客户端自身，因此必须采取一些安全措施确保只为授权的服务器提供服务；
ProxyPass 将一个远端服务器映射到本地服务器的URL空间中；
ProxyPassReverse 调整由反向代理服务器发送的HTTP回应头中的URL；
Proxy_set_header 是向反向代理服务器后端服务器发起请求时添加header信息，当请求的服务器有多个host时，可以通过Host选项区分。
理解正向代理与方向代理：
正向代理：
“反向代理（Reverse Proxy）是指以代理服务器来接受 Internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 Internet 请求连接的客户端，此时，代理服务器对外就表现为一个服务器。”——《实战Nginx》
正向代理（Forward Proxy），通常都被简称为代理，就是在用户无法正常访问外部资源，比方说受到GFW的影响无法访问twitter的时候，我们可以通过代理的方式，让用户绕过防火墙，从而连接到目标网络或者服务。
Nginx也可以通过设置proxy_pass来实现反向代理。配置如下：
location /dir {
proxy_pass http://127.0.0.1/
反向代理的优势
请求的统一控制，包括设置权限、过滤规则等；
隐藏内部服务真实地址，暴露在外的只是反向代理服务器地址；
实现负载均衡，内部可以采用多台服务器来组成服务器集群，外部还是可以采用一个地址访问；
解决Ajax跨域问题；
作为真实服务器的缓冲，解决瞬间负载量大的问题。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索服务器
nginx 反向代理 跨域、apache 反向代理 跨域、nginx反向代理apache、nginx代理 解决跨域、nginx 代理 跨域，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！> 博客详情
目前我们有连个站点和。
里面有很多请求是发往的，由于不在同一个domain域中，这就会产生跨域的问题，通常我们都是利用CORS来实现跨域的，也就是在服务端添加一下响应头：
1 Access-Control-Allow-Headers
2 Access-Control-Allow-Methods
3 Access-Control-Allow-Origin
4 Access-Control-Allow-Credentials
具体的配置可以百度或者google，当然解决跨域的方法还有诸如jsonp等等技术，当时今天我想说的却是利用nginx的url重写来实现。
假设网站内有一个利用jquery发送的ajax请求，
url:'/api/getContent',
method:'POST',
success:function(result){
如果我们没有做任何处理，在浏览器控制台我们就会得到一个跨域请求的异常，这儿我们就不多说，现在我们要做的是利用nginx来解决这个问题，我们先把这个ajax请求改一下：
//新的ajax请求
url:'api/getContent',
method:'POST',
后面省略......
没错，就是把url给简写了，去掉了前面的请求地址，只保留了后面的请求url内容。
下面我们去配置nginx
#配置nginx.conf
在http节点下添加以下内容
listen 80;
charset utf-8;
location /api {
rewrite ^.+api/?(.*)$ /$1
proxy_pass :8080/api/$1
location / {
proxy_pass :8088/index.
#重新加载nginx配置文件
nginx -s reload
看出点什么了吗？当我们这个配置生效的情况下，前面那段新的ajax请求会发送到 /api/getContent,当这个请求到达nginx时，会被location /api给匹配到，然后利用正则表达式进行匹配后面的内容也就是
rewrite ^.+api/?(.*)$
匹配到的内容表识为$1,然后用break停止
最后我们利用proxy_pass代理
:8080/api/$1
也就是说最后我们的请求还是发送到了
，所以我们的请求最后会被成功的响应。
那么为什么没有出现跨域的问题呢？
最后总结来自
nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。
通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。
对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。
这样，为了解决跨域问题，只需要动一下nginx配置文件即可。简单、强大、高效!
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥2014年7月 Linux/Unix社区大版内专家分月排行榜第三2003年2月 C/C++大版内专家分月排行榜第三
2013年5月 总版技术专家分月排行榜第一
2016年7月 总版技术专家分月排行榜第二2016年3月 总版技术专家分月排行榜第二2015年12月 总版技术专家分月排行榜第二2014年8月 总版技术专家分月排行榜第二2014年7月 总版技术专家分月排行榜第二2013年6月 总版技术专家分月排行榜第二
2014年7月 Linux/Unix社区大版内专家分月排行榜第三2003年2月 C/C++大版内专家分月排行榜第三
2014年7月 Linux/Unix社区大版内专家分月排行榜第三2003年2月 C/C++大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。