Hack笔记

跨域问题在现在前后端分离的项目中是一个很常见的问题，以前我写过一篇《nginx反向代理解决跨域问题》的文章。前段时间在做nginx配置允许跨域时一直失败，参考的是segmentflaut上面的一篇文章，尝试了许久都没有成功，搞的我都有点开始怀疑人生了。

后来我去查看了一下nginx官方add_header的文档，发现它教程中放在location块中是没有问题的，add_header支持放在”http, server, location, if in location“，也就是不仅可以放在location中，也可以放在location中的if块里面。那么到底哪里出了问题哪？

在一篇叫《Using CORS》文章中，作者提到”Access-Control-Allow-Origin (required) – This header must be included in all valid CORS responses。”,也就是说我们必须要保证所有cors请求都要返回我们设置的header，而”location /”是一个默认的匹配块，如果匹配到其他块，那么 我们设置在location中的跨域header设置就会无效了，于是就做了下面的改动。

在nginx配置文件下面增加cors.conf配置文件，内容如下：

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
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';

if ($request_method = 'OPTIONS') {
    return 204;
}

然后在server块中include进来跨域配置文件：

location / {
       index  index.html index.htm index.php;
       autoindex on;
       try_files $uri $uri/ /index.php?$query_string;
}

include cors.conf;

这样在其他的网站配置文件中只需要 “include cors.conf”即可。当然如果你也可以直接用cors.conf配置文件里面的内容替换”include cors.conf”。重启nginx，就成功可以让js跨域请求了啊！