nginx配置CORS实现跨域

ashe 发布于2019-07-25 14:05 / 3205人阅读

摘要：场景最近有个上传图片的需求，为了分流，将接口部署到另一个多带带的域名，所以需要解决跨域的问题。同时只能对指定子域名放开访问权限，所以设置如下。实现还好支持指令，对域名做下正则校验就可以实现指定子域名跨域。

场景

最近有个上传图片的需求，为了分流，将接口部署到另一个多带带的域名，所以需要解决跨域的问题。

思路

一开始想着在后端代码直接设置cors策略，后来发现请求都是从nginx进入，所以将cors移动到nginx下实现。同时只能对指定子域名放开访问权限，所以设置如下。

Access-Control-Allow-Origin *.test.com

亲测不可用，只能是*和指定的域名。

实现

还好nginx支持if指令，对域名做下正则校验就可以实现指定子域名跨域。
接下来测试发现浏览器的options发到后端后，没有处理返回了一些莫名其妙的东西。
好吧直接在nginx返回不发给后端，还是用if指令判断http请求类型。
这里就用了两个if，最坑的事情出现了，nginx在多个if指令下，有些指令是最后一个if才有效，前面的会被覆盖。
最终还是直接重复add_header解决。

注意点

客户端ajax请求withCredentials属性设置为true才会发送cookie。
同时cookie要是上传域名可用的，不然还是要通过url参数等方式去传递。

nginx配置

location / {
   # 检查域名后缀
   if ($http_origin ~ .test.com) {
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
        add_header Access-Control-Max-Age 1728000;
   }
   # options请求不转给后端，直接返回204
   # 第二个if会导致上面的add_header无效，这是nginx的问题，这里直接重复执行下
   if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type;
        add_header Access-Control-Max-Age 1728000;
        return 204;
   }
    
   # 其他请求代理到后端
   proxy_set_header Host $host;
   proxy_redirect off;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Scheme $scheme;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
   proxy_pass http://xxx.xxx.xxx.xxx;
}

私有云专线服务 nginx服务器跨域实现跨域 js实现跨域访问 nginx配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39697.html

CORS方式实现ajax跨域 --- nginx配置

摘要：目前，所有浏览器都支持该功能，浏览器不能低于。因此，实现通信的关键是服务器。如果指定的域名在许可范围内，服务器返回的响应，会多出头信息字段也可能多出其他可选字段或者是表示接受任意域名的请求。实际跨域问题及其解决方案 1.课题：ajax实现跨域访问 2.背景： 1.画面服务器：192.168.196.6 → tomcat服务2.js模板服务器：192.168.196.8 → ngi...

csRyan 2019-07-25 14:23 评论0 收藏0
CORS跨域与Nginx反向代理跨域优劣对比

摘要：最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括和反向代理。反向代理此时后端相当于不跨域，和正常请求一致，无需额外配置。最近写了一些关于前后端分离项目之后，跨域相关方案的基本原理和常见误区的帖子，主要包括CORS和Nginx反向代理。这两种方案项目中都有在用，各有优缺，关于具体使用哪种方案，大家的观点也不大一致，本文主要就此展开一下，从前后端及服务...

yiliang 2019-07-25 14:26 评论0 收藏0
彻底弄懂跨域问题

摘要：用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

rose 2019-07-25 14:36 评论0 收藏0
彻底弄懂跨域问题

摘要：浏览器同源策略我们为何要研究跨域问题因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

CoorChice 2019-08-23 14:41 评论0 收藏0