Nginx 解决浏览器 Ajax 跨域问题

跨域是指 host 为 A 页面中的 Ajax 发起指向 host B 的请求，只要 A 和 B 的协议、域名、端口、子域名其中任何一项不同，则执行的访问都会被认为是跨域的请求，几乎所有的浏览器为了安全等问题，对跨域访问做了限制，也就是无法通过浏览器发起跨域请求。跨域问题的本质是浏览器的限制。但也并不意味着浏览器根本不能发出任何跨域请求，在发起跨域请求后，浏览器总会发送一个 OPTION 请求，并根据响应的 Header 中 Access-Control-Allow-Origin 参数值进行下一步操作，如果这个参数不存在或不符合当前的域，则拒绝这个跨域请求。解决这个问题的一个简单方法就是使用 Nginx 反向代理。

场景示例

现在假设在同一台主机上部署有两个网站，访问地址分别为 localhost:8080（A） 和 localhost:8081（B）， A 站的某个页面 Ajax 想要访问 B 的某个接口，以 jQuery 的 Ajax 为例：

$.get(

    "http://localhost:8081/api/orders",

    {},

    function (result) {

    // ...

});

显然，在没有做任何其他配置的情况下，这个请求一定会发送失败。

Nginx 反向代理

修改 Nginx 安装目录下 conf/nginx.conf 文件，添加如下内容：

server {

    listen 80;

    server_name localhost;

    location /{

        proxy_pass http://localhost:8080

    }

    # 所有跨域访问以 /api 开头

    location /api {

        # 请求改写

  rewrite ^/api/(.*)$ /$1 break;

  proxy_pass http://localhost:8081;

   }

}

• 这样配置并启动 Nginx 之后，可以通过 localhost 的 80 端口 访问 8080和 8081 端口的网站

• 所有以 /api 开头的请求将被重写，然后被发送给 8081 端口

• 对请求的重写为正则式的形式： ^/api/(.*)$ /$1 break; $1 表示匹配正则表达式中的第一个分组，也就是 (.*) 匹配的内容，将其改写为 /匹配内容，比如 /api/abc/def/ghi 将被改写为 /abc/def/ghi， break 表示一次匹配成功则结束。

URL 更改

原来 Ajax 请求中所有指向 localhost:8081/*** 的请求现在都应该改成 localhost/api/***，比如这样：

$.get(

    "http://localhost/api/orders",

    {},

    function (result) {

    // ...

});

其他方案

CORS （跨域资源共享），需要设置服务端响应头中 Access-Control-Allow-Origin 参数。

个人博客同步更新，获取更多技术分享请关注：郑保乐的博客