后使用快捷导航没有帐号？
只需一步，快速开始
查看: 3801|回复: 0
Apache反向代理本地跨域调试Ajax网页
UID288988在线时间 小时积分193帖子离线17069 天注册时间
初级会员, 积分 193, 距离下一级还需 7 积分
原创文章(转载请注明出处):
Ajax是一种普遍使用的技术，由于其限制，我们只能向同一主机，同一端口下发出数据请求，否则就会抛出异常。 在调试的时候多有不便，跨域技术也有很多种，譬如这篇文章。
讲了不少跨域的方法，今天分享一种使用Apache反向代理的方法，方便诸位开发者。
首先，打开Apache的配置文件，httpd.conf(该文件在Apache的安装路径下，conf子目录下)载入以下模块:
LoadModule proxy_module modules/mod_proxy.so&&
LoadModule proxy_connect_module modules/mod_proxy_connect.so&&
LoadModule proxy_http_module modules/mod_proxy_http.so&&
其次，配置我们的反向代理服务器，在httpd.conf文件中添加如下字段:
ProxyPass /realserver http://真正服务器的ip&&
ProxyPassReverse /realserver http://真正服务器的ip&&
其中，realserver为我们的本地虚拟路径，后面为真正服务器的ip，如果你不明白这些指令的具体涵义，可查阅Apache的官方文档，修改完毕后重启Apache使新配置生效。
最后，我们修改windows的hosts文件，按Windows+R打开运行窗口，执行
#在windows7下默认没有此文件，只有hosts.ics，需要创建一个hosts文件。&&
#hosts.ics是系统管理共享互联网连接的文件，手工修改后重启即失效。
notepad %systemroot%/system32/drivers/etc/hosts&&
在hosts文件中输入，或添加一行
127.0.0.1 真正服务器的域名&&
这样，我们在本地调试Ajax时，就可以访问到公网上服务器的资源，不会存在跨域的问题了，例如:
1. 本机发出Ajax请求到，http://真正服务器的域名/realserver/真正服务器的CGI。
2. 由于我们修改了hosts文件，实际访问的是真正服务器的CGI。
3. Apache检测到realserver是个虚拟路径，并做了反向代理，会把http://真正服务器的ip/真正服务器的CGI返回值原封不动的传给我们。
这样，我们就可以在本地机器，对任何一个公网服务器发出Ajax请求了。如果你觉得还不够方便，可以使用js来管理。
&script&&&
var production_server =&&
var serverpath = &http://真正服务器的域名/& + (production_server ? &realserver/& : &&);&&
//在引用到服务器路径时直接引用serverpath即可，这样就很方便了。&&
[[i] 本帖最后由 sophiasmth 于
01:55 编辑 ]
Powered byWeb前台（25）
什么是跨域
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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&,
(result) {
&&&&&&&&$(&div&).html(result);
下面把testFlask2项目的javascrip文件修改一下。这样访问同源的url，就不会有跨域问题。
$(&button&).click(function
&&&&$.get(&partners/json&,
(result) {
&&&&&&&&$(&div&).html(result);
但是，我们testFlask2项目实际上没有partners/json这样的url，那怎么处理呢？
我们这样编写nginx的配置文件：
&&listen8000;
&&location/
&&&&includeuwsgi_
&&&&uwsgi_passunix:/tmp/testFlask2.
&&location/partners
&&&&rewrite^.+partners/?(.*)$
&&&&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/?(.*)$
&&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配置文件即可。简单、强大、高效!
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
(4)(6)(3)(6)(4)(7)(4)(1)(2)(2)(14)(1)(1)(2)(1)(1)(1)(1)(4)通过nginx反向代理实现接口跨域问题
开发公司的一个项目时采用的是RESTFUL接口形式,token等权限验证信息是注入在http请求的header头部的.因为是在内网进行调试,接口的域名为
,为了方便在家的时候进行开发调试,将接口挂在了外网.因80端口被运营商限制,于是使用了另外的端口.而我在本地虚拟了一个
的域名,请求,直接显示跨域...
域名下使用了一个php页面来进行301跳转,但是发现很是麻烦,需要提取出我实际需要的url再进行转发,该方案被放弃
本地用nginx绑定了一个非80端口的
域名,然后nginx内做了反向代理到接口,结果发现忘记了域名相同端口不同也算跨域,该方案直接被打死= =
受方案一和方案二的灵感,想到为何不直接使用nginx反向代理到接口服务器?使用我本地
中一个永远不会存在的url作为接口的跳板,然后nginx讲该url反向代理到接口服务器.ok,尝试,成功!
附上nginx配置信息:
listen 80;
root /wwwroot/
index index.html index.htm index.
# 将a.com/api的所有请求反向代理到b.com:1234
location /api {
rewrite ^.+api/?(.*)$ /$1
proxy_:1234;
location ~ /\.ht {
协议创作或转载,转载原创文章请注明来源于
,否则请勿转载或再转载,谢谢合作:)Web服务器反向代理——跨域的另一种方案 - 推酷
Web服务器反向代理——跨域的另一种方案
之前在上一篇”
“一文中简单介绍了下前端跨域的几种实现方案，并详细介绍了“后端代理”的方式，协助前端跨域的方案。
真实的环境中更多的不是非0即1的二进制，而是适合与更适合。尤其是在做方案选取的时候，各种方案各有优劣，更多是去根据自己的场景选取一个最适合自己的。重新回到前端跨域问题，我在后端代理——跨域的另一种方案中也对各种方案做了简单的总结。欢迎大家拍砖。
Hybrid App
项目的开发过程中，数据需要跟“移动后台API'”同学获取，因为我俩都是本地开发，本地起Web服务，因此，我在请求他（http://192.168.60.31:8602/api/v3/deal/search/substore/129180）的时候就果断碰到了跨域问题。
因为目前业务功能涉及到的还只是
请求，所以我首先想到通过
的方式解决。但是很快遭到了后台同学的拒绝，因为这不是改动大或小、简不简单的问题，而是这种任务就不应该又后台同学来做。
这回污染了后端
的代码。因为不能污染后台的代码，我似乎只有一条选择，便是之前提到的
的方式，但是想到以后只要涉及到
移动后台API
的开发，我就要一直维护这份
的代码，我也挺头疼。
想到既然可以通过后端代理，那样似乎代表着可以利用比后端更底层，与前端
请求更亲近的Web服务器去做反向代理，来实现跨域？简单查了下资料，发现网上早有先例。
“反向代理（Reverse Proxy）是指以代理服务器来接受
上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给
请求连接的客户端，此时，代理服务器对外就表现为一个服务器。”——《实战Nginx》
既然有反向代理，就肯定有正向代理。什么叫正向代理呢？
正向代理（Forward Proxy），通常都被简称为代理，就是在用户无法正常访问外部资源，比方说受到GFW的影响无法访问twitter的时候，我们可以通过代理的方式，让用户绕过防火墙，从而连接到目标网络或者服务。
反向代理VS正向代理
反向代理的优势
请求的统一控制，包括设置权限、过滤规则等
区分动态和静态可缓存内容
隐藏内部服务真实地址，暴露在外的只是反向代理服务器地址
实现负载均衡，内部可以采用多台服务器来组成服务器集群，外部还是可以采用一个地址访问
解决Ajax跨域问题
作为真实服务器的缓冲，解决瞬间负载量大的问题
反向代理服务器的配置
服务器同样支持。
# 反向代理到志伟机器
location /api {
proxy_pass &http://192.168.60.31:8602&;
proxy_set_header Host &192.168.60.31:8602&;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header
是向反向代理的后端
服务器请求时，添加制定的header头信息。当请求的后端
服务器有多个基于域名的虚拟主机时，要通过添加指定的
在请求和响应头中添加
X-Forwarded-For
原始请求的地址，因为使用了反向代理之后，后端
服务器（以PHP为例）就不能通过
$_SERVER[&REMOTE_ADDR&]
变量来获取用户真实的
$_SERVER[&REMOTE_ADDR&]
指向的是反向代理的
$_SERVER[&X-Forwarded-For&]
Order deny,allow
Allow from all
ProxyPass /api http://192.168.60.31:8602
ProxyPassReverse /api http://192.168.60.31:8602
ProxyPass和ProxyPassReverse指令都是反向代理需要的配置。
ProxyPass用于将一个远程服务器映射到本地服务器的URL空间中。
而ProxyPassReverse主要解决后端服务器重定向造成的绕过反向代理的问题，在后端服务器会进行服务器端跳转时使用，对HTTP重定向时回应中的Location、Content-Location和URI头里的URL进行调整。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致最简单实现跨域的方法----使用nginx反向代理_Nginx学习_ThinkSAAS
最简单实现跨域的方法----使用nginx反向代理
最简单实现跨域的方法----使用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客户端。
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的配置文件：
server{
listen8000;
location/
includeuwsgi_
uwsgi_passunix:/tmp/testFlask2.
location/partners
rewrite^.+partners/?(.*)$
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/?(.*)$
includeuwsgi_
proxy_pass/;
我们就把sohu网站整个搬到我们的8080:/sohu/目录下了，我们的javascript就可以尽情调用其RESTFUL服务了。
顺便说一下，rewrite^.+sohu/?(.*)$
这句命令中，$1表示(.*)这个部分。第一对()内的参数是$1，第二对()内的参数就是$2，以此类推。
本文介绍了利用nginx的反向代理的功能，实现跨域访问任意应用和网站的方法。
nginx是一个高性能的web服务器，常用作反向代理服务器。nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。
通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。
对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求，并且并不知道这个请求是来自代理服务器的。
简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实的服务器，让它以为这个http请求是直接来自与用户浏览器的。
这样，为了解决跨域问题，只需要动一下nginx配置文件即可。简单、强大、高效!
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信