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 之后,可以通过 localhost80 端口 访问 80808081 端口的网站
  • 所有以 /api 开头的请求将被重写,然后被发送给 8081 端口
  • 对请求的重写为正则式的形式: ^/api/(.*)$ /$1 break; $1 表示匹配正则表达式中的第一个分组,也就是 (.*) 匹配的内容,将其改写为 /匹配内容,比如 /api/abc/def/ghi 将被改写为 /abc/def/ghibreak 表示一次匹配成功则结束。

URL 更改

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

$.get(
    "http://localhost/api/orders",
    {},
    function (result) {
    // ...
});

其他方案

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

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zbl1146556298/article/details/79959169
个人分类: 后端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭