Nginx的跨域配置问题

最近使用nginx解决跨域时碰到一个问题,特在这里记下。如果有大神知道,谢谢帮我解决疑惑
  1. 问题如下,前期nginx配置是,android端所有访问是正常的,但是ios端有的服务可以调用,有的却是不行。

在这里插入图片描述

  1. 无意间将nginx配置改为了如下,发现所有的服务都正常访问。
    在这里插入图片描述
  2. 百思不得其解,查找度娘,找到了一篇有关的文章 : 文章地址
  3. 这篇文章有比较详细的一个描述,由于本人不是很懂,特将文章贴在本文,方便以后查找。

【如果文章作者看到希望能解答小弟问题】
Nginx的CORS配置,网上太多这配置了,但大家更多的复制粘贴、转发,几乎都是类似下面这三两行:

 add_header Access-Control-Allow-Origin *;
 add_header Access-Control-Allow-Headers X-Requested-With;
 add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

跨域相关的配置,主要是下面这部分:

 add_header 'Access-Control-Allow-Origin' $http_origin;
 add_header 'Access-Control-Allow-Credentials' 'true';
 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
 add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; 
 add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; 
 if ($request_method = 'OPTIONS') {  
  add_header 'Access-Control-Max-Age' 1728000; 
  add_header 'Content-Type' 'text/plain; charset=utf-8'; 
  add_header 'Content-Length' 0;  
  return 204; 
 }

1、Access-Control-Allow-Origin,这里使用变量 $http_origin取得当前来源域,大家说用“*”代表允许所有,我实际使用并不成功,原因未知;

2、Access-Control-Allow-Credentials,为 true 的时候指请求时可带上Cookie,自己按情况配置吧;

3、Access-Control-Allow-Methods,OPTIONS一定要有的,另外一般也就GET和POST,如果你有其它的也可加进去;

4、Access-Control-Allow-Headers,这个要注意,里面一定要包含自定义的http头字段(就是说前端请求接口时,如果在http头里加了自定义的字段,这里配置一定要写上相应的字段),从上面可看到我写的比较长,我在网上搜索一些常用的写进去了,里面有“web-token”和“app-token”,这个是我项目里前端请求时设置的,所以我在这里要写上;

5、Access-Control-Expose-Headers,可不设置,看网上大致意思是默认只能获返回头的6个基本字段,要获取其它额外的,先在这设置才能获取它;

6、语句“ if ($request_method = 'OPTIONS') { ”,因为浏览器判断是否允许跨域时会先往后端发一个 options 请求,然后根据返回的结果判断是否允许跨域请求,所以这里单独判断这个请求,然后直接返回;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值