脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网站技巧 → 服务器 → nginx → Nginx处理AJAX跨域请求

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

 更新时间：2016年01月13日 17:43:43   作者：蒋宇捷  
这篇文章主要介绍了Nginx服务器中处理AJAX跨域请求的配置方法讲解,包括Nginx作Apache的反向代理时的配置方法,需要的朋友可以参考下

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

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等

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

Access-Control-Allow-Origin: *

重启nginx

service nginx reload

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

HTTP/1.1 200 OK
Server: nginx
Access-Control-Allow-Origin: other.subdomain.com


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

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

2016113174307216.gif (268×67)

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

2016113174332406.gif (372×91)

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

     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就能够读取到其他远程服务器的数据了。

2016113174351088.gif (350×62)

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

     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下的配置如下所示：

     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

您可能感兴趣的文章:

相关文章

  • Nginx鉴权、限流问题

    Nginx鉴权、限流问题

    这篇文章主要介绍了Nginx鉴权、限流问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • nginx快速部署一个网站服务(多域名+多端口)

    nginx快速部署一个网站服务(多域名+多端口)

    本文主要介绍了nginx快速部署一个网站服务，并实现多域名和多端口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • 详解Keepalived+Nginx实现高可用（HA）

    详解Keepalived+Nginx实现高可用（HA）

    这篇文章主要介绍了详解Keepalived+Nginx实现高可用（HA），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • centos8中使用yum安装nginx的详细过程

    centos8中使用yum安装nginx的详细过程

    这篇文章主要介绍了centos8中怎样使用yum安装 nginx,centos8和centos7安装nginx有点点不一样,centos8 自带了nginx 1.14.1 ,我们先升级到新稳定版1.20.1，具体安装方法跟随小编一起学习下吧
    2023-03-03
  • nginx转发内网图片的代码示例

    nginx转发内网图片的代码示例

    这篇文章主要给大家介绍了nginx转发内网图片,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的小伙伴可以自己动手试一下
    2023-10-10
  • Nginx timeout超时配置详解

    Nginx timeout超时配置详解

    这篇文章主要介绍了Nginx timeout超时配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 一句简单命令重启nginx

    一句简单命令重启nginx

    最近我的多个VPS经常出现502错误，经常需要重启nginx，但网上的很多教程都需要繁琐的启动脚本，远不如apache的重启命令那么简单。
    2010-03-03
  • Nginx限流配置详解

    Nginx限流配置详解

    限流是服务降级的一种方式，通过限制系统的输入和输出流量以达到保护系统的目的，本文主要介绍了Nginx限流配置详解，感兴趣的可以了解一下
    2023-11-11
  • 在nginx中使用geoip做区域限制的方法

    在nginx中使用geoip做区域限制的方法

    今天小编就为大家分享一篇在nginx中使用geoip做区域限制的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-08-08
  • Nginx的一些常用配置汇总

    Nginx的一些常用配置汇总

    nginx配置说简单也简单,说复杂也复杂,入门简单,精通难,下面这篇文章主要给大家介绍了关于Nginx的一些常用配置,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05

最新评论