Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求
AJAX从一个域请求另一个域会有跨域的问题。那么如何在nginx上实现ajax跨域请求呢？要在nginx上启用跨域请求，需要添加add_header
Access-Control*指令。如下所示：

?


1

2

3

4

5

6

7

8

9

10

11

12

location /{

add_header ‘Access-Control-Allow-Origin‘ ‘http://other.subdomain.com‘;

add_header ‘Access-Control-Allow-Credentials‘ ‘true‘;

add_header ‘Access-Control-Allow-Methods‘ ‘GET‘;

  

...

...

the rest of your configuration here

...

...

  

}

注释如下：

  • 第一条指令：授权从other.subdomain.com的请求
  • 第二条指令：当该标志为真时，响应于该请求是否可以被暴露
  • 第三天指令：指定请求的方法，可以是GET，POST等

如果需要允许来自任何域的访问，可以这样配置：

?


1

Access-Control-Allow-Origin: *

重启nginx

?


1

service nginx reload

ajax跨域请求测试
成功时，响应头是如下所示：

?


1

2

3

HTTP/1.1 200 OK

Server: nginx

Access-Control-Allow-Origin: other.subdomain.com

用Nginx和Apache的反向代理解决Ajax的跨域问题

傲游主站上有一个很吸引人的功能，就是下载次数计数，如下图所示。这个功能就是利用了上述技术实现的。

从下图的Firebug中可以看到，该页面通过Ajax反复请求一个名为/api/counter的路径以径获取最新的下载数量。

而这个输出路径实际上在服务器上是不存在的，这个路径只是另外一台服务器某个路径而已，这就是使用了Nginx的反向代理功能实现的。
     
1、Nginx
         回到计数器的这个例子，Nginx的配置片段如下所示：

?


1

2

3

4

5

location /api/counter {

  rewrite (.*) /out break;

   proxy_pass http://hfahe.maxthon.com;

  proxy_set_header Host "hfahe.maxthon.com";

}

那么访问http://www.maxthon.cn/api/counter这个地址，输出和直接访问http://hfahe.maxthon.com/out这个地址是完全一样的，如下图所示。通过这种方式，本地的Ajax就能够读取到其他远程服务器的数据了。

proxy_set_header参数在需要进行域名的转发时使用。Nginx还可以进行端口的转发，只需将proxy_pas
s配置修改为http://hfahe.maxthon.com:81这种形式即可。
        
2、Apache
         Apache反向代理需要使用mod_proxy和mod_proxy_http.so等模块。
        
在Windows下的配置如下所示：

?


1

2

3

4

5

6

7

8

LoadModule proxy_module modules/mod_proxy.so

LoadModule proxy_http_module modules/mod_proxy_http.so

ProxyRequests Off

ProxyPass /start http://i.maxthon.cn/

ProxyPass /proxy http://192.168.1.111/proxy/

ProxyPassReverse /proxy http://192.168.1.111/proxy/ # for server redirect

ProxyPass和ProxyPassReverse指令都是反向代理需要的配置。ProxyPass用于将一个远程服务器映射到本地服务器的URL空间中。而ProxyPassReverse主要解决后端服务器重定向造成的绕过反向代理的问题，在后端服务器会进行服务器端跳转时使用，对HTTP重定向时回应中的Location、Content-Location和URI头里的URL进行调整。
        
而在Linux下的配置如下所示：

?


1

2

3

4

5

6

LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so

LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so

ProxyRequests Off

ProxyPass /fb http://fb.maxthon.com/ajax

ProxyPassReverse /fb http://192.168.1.111/proxy/ # for server redirect
时间： 2024-08-05 23:40:40

Nginx服务器中处理AJAX跨域请求的配置方法讲解的相关文章

jQuery ajax跨域请求的解决方法

在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数据,事实上简单来说请求同一个域名下的url或者说用不带http的绝对路径和相对路径请求是没有任何问题的,如果请求外部资源,那么这就称为跨域请求. 由于安全性的问题,浏览器默认不支持跨域调用,晚上也有很多方法,各有优缺点,但是有一个比较好的解决方法这也是jQuery1.2之后官方推荐的,那就是在客户端

XMLHttpRequest(ajax)跨域请求的优雅方法：CORS

浏览器的同源原则,使得 XMLHttpRequest 不能跨域通讯.为了实现跨域,有很多变态的做法.其中,比较优雅的是 JSONP 方案,但 JSONP 仅限于 GET 方法,其它方法无法实现. W3C在2009年的时候就出过一个标准,只要在响应头部使用 Access-Control-Allow-Origin 即可实现跨域通讯,例如: HTTP/1.1 200 OK Access-Control-Allow-Origin: * 当然,如果想要兼容古老的 IE8,还得找 JSONP 方案,或者去实

php中ajax跨域请求---小记

php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.com/xxx.js', success:function(data){ ......... } }) 很简单的一个ajax请求:后面在做迁移的时候,由于系统目录的安排,js文件放到了,img.xxx.com域名下,这样就设计到了跨域问题,于是就改成了这样: $.ajax({ type:'get', ur

本地主机作服务器解决AJAX跨域请求访问数据的方法

近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www.apachefriends.org ,只需要解压傻瓜式地安装就可以. 找到安装软件的目录,点击xampp-control.exe然后启动Apache服务, 打开浏览器,在地址栏输入localhost,出现如下图片,说明安装启动都没问题 现在编写两个简单的文本,一个txt文件,一个html代码: 截图

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

JQuery的Ajax跨域请求的解决方案

http://www.open-open.com/lib/view/open1334026513327.html 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式, 于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)

一.Ajax跨域概述 同源策略 - 同源策略(Same origin policy)是一种约定,它是浏览器的核心也最最基本的核心.如果少了同源策略,则浏览器的正常功能可能都会收到影响.可以说Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现 - 它是由 Netscape 提出的一个著名的安全策略 - 现在所有支持 JavaScript 的浏览器都会使用这个策略 - 所谓同源策略是指,域名.协议.端口相同 域名概述 - 域名(Domain Name) 是由一串用点分隔的名字组成的In

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

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