nginx跨域问题中Credentials和Origin配置
挨实际开发中遇到请求跨域的问题一般有两种解决办法:
1.如果接口是请求后台,那么在后台写拦截器,拦截所有OPTIONS请求并返回200
2.如果接口是通过nginx去访问后台,那么可以在nginx直接拦截
问题描述:
现在有一个提供给其他厂商的接口跨域,接口地址是nginx地址。
解决办法:
在nginx location中加上配置如下:
1 if ($request_method = 'OPTIONS') { 2 add_header Access-Control-Allow-Origin '*'; 3 add_header Access-Control-Allow-Methods 'POST,OPTIONS,GET'; 4 add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 5 add_header Access-Control-Allow-Credentials 'true'; 6 add_header Allow 'POST, OPTIONS'; 7 add_header Content-Type 'text/plain;charset=utf-8'; 8 return 200; 9 }
这样加入配置,用chrome浏览器调试的时候发现,OPTIONS请求返回200,但是却没有POST请求,意味着OPTIONS请求有问题。打开火狐浏览器,调试工具发现OPTIONS报错,报错信息如下:
已拦截跨源请求:同源策略禁止读取位于 http://ip:port/xxxxx/的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。
查阅资料后发现问题:
如果在指定Access-Control-Allow-Credentials 'true'后,就不能指定Access-Control-Allow-Origin为*,必须将其指定为具体的地址,修改如下:
1 if ($request_method = 'OPTIONS') { 2 add_header Access-Control-Allow-Origin $http_origin; 3 add_header Access-Control-Allow-Methods 'POST,OPTIONS,GET'; 4 add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 5 add_header Access-Control-Allow-Credentials 'true'; 6 add_header Allow 'POST, OPTIONS'; 7 add_header Content-Type 'text/plain;charset=utf-8'; 8 return 200; 9 }