反向代理(Apache、Nginx)解决JS跨域问题

写在前面

之前介绍了JSONP的跨域方式,那是利用前端方案解决跨域问题。跨域问题也可以用后端方案解决,比如CORS(Cross-Origin-Resource-Shares)、方向代理等。今天介绍下反向代理如何解决跨域问题。
Apache和Nginx都可以实现反向代理,下面分别介绍下Apache和Nginx如何通过反向代理解决跨域问题。

Apache

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_addr;

将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

Nginx也可以通过设置proxy_pass来实现反向代理。配置如下:

location /dir {
    proxy_pass http://127.0.0.1/api;
}

反向代理的优势

 请求的统一控制,包括设置权限、过滤规则等;
 隐藏内部服务真实地址,暴露在外的只是反向代理服务器地址;
 实现负载均衡,内部可以采用多台服务器来组成服务器集群,外部还是可以采用一个地址访问;
 解决Ajax跨域问题;
 作为真实服务器的缓冲,解决瞬间负载量大的问题。

时间: 2024-09-20 00:12:41

反向代理(Apache、Nginx)解决JS跨域问题的相关文章

Apache设置反向代理解决js跨域问题

这是一个很简单的方案,通过启用Apache反向代理解决js跨域问题 为什么要这么做? 在现在的开发过程中大家会遇到这样一个问题:后端代码写好之后,前端的小伙伴需要将后端代码部署到本地才能正常使用api.若直接使用远程服务器上的api(例如测试服务器上的api)就会出现js跨域问题,导致无法使用远程服务器上的api.将后端代码部署到前端小伙伴的本地会出现以下几个问题: 前端小伙伴下载后端代码到本地并配置,花时间! 后端代码有更新之后,前端小伙伴也需要更新本地的后端代码,花时间! 前端小伙伴本地安装

服务器端解决JS跨域调用问题

  一. 使用JSONp方式调用 不做详细讲解,可以参考jq文档   二. 服务端配置 修改Web.config 文件 <system.webServer> <modules runAllManagedModulesForAllRequests="true"></modules> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Ori

5种处理js跨域问题方法汇总_javascript技巧

前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp.    ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在fire

js跨域请求的5中解决方式

这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法: ? 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(da

js跨域问题浅析及解决方法优缺点对比_javascript技巧

什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 复制代码 代码如下: URL                      说明       是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www

js跨域请求的5中解决方式_javascript技巧

跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一.JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从而实现了跨域. 诞生背景: 1.Ajax直接请求普通文件存在跨域无权访问的问题,甭管是静态页面.动态

用iframe设置代理解决ajax跨域请求问题

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题.于是想用代理的方式来解决这个跨域问题. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy&q

Apache反向代理无法加载js css img

问题描述 Apache反向代理无法加载js css img Apache反向代理无法加载js css img 反向代理配置 ProxyRequests Off <Proxy http://proxy.mcmxzl.com> Options MultiViews AllowOverride None Order allow,deny Allow from all </Proxy> ProxyPass /roadcloud http://www.roadcloud.com.cn/ Pr

如何解决ajax跨域的问题

ajax|解决|问题|跨域 ajax(动态网站静态化)伴随的goole 的推动,越来越多的站点开始使用了,在开大ajax(动态网站静态化)程序的时候会遇到很多的问题,主要有以下几个方面:     1.跨浏览器问题     2.历史后退状态问题     3.跨域问题     跨浏览器的问题因为现在有很多的开元的框架已经解决了,我们无需为此而烦恼.     历史后退状态问题我们可以使用一个数组来保存历史纪录,然后把这些数据村到历史对象中去,中的也可以解决,并且还有很多的开元框架给与支持,这样问题就不