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         }