Nginx 配置CORS解决跨域

什么是跨域?

由于浏览器的同源策略，一个域下的文档或脚本试图去请求另一个域下的资源，就会产生跨域，那么怎么才算同源呢，即满足 协议相同、端口相同、主机相同。

跨域常见情景

跨域常见错误

Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Nginx跨域配置

location / {
​
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE' always;
        add_header 'Access-Control-Allow-Headers' '*' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        return 204;
    }
​
    if ($request_method ~* '(GET|POST|DELETE|PUT)') {
        add_header 'Access-Control-Allow-Origin' '*' always;
    }
​
}

扩展

因在开发中的请求路径需要重写规则，导致访问地址出现404，故记录一下。

location /api/intefaces {  
    proxy_pass http://127.0.0.1:8080;
    proxy_connect_timeout 600;
    proxy_read_timeout 600;
​
    rewrite "^/api/(.*)$" /$1 break; 
}
 
location / {
    proxy_pass http://127.0.0.1:8000;
    proxy_connect_timeout 600;
    proxy_read_timeout 600;
}

解释：

proxy_pass：反向代理，不赘述。

rewrite：路径重写。

^/api/(.*)$：正则，表示api之后的路径进行分组，/$1 即取组1进行路径重写

break：重写后不在重新匹配

总结

以上配置虽然解决了跨域，但是并不安全，因为放开了所有请求，实际配置要根据线上环境进行配置，如大家有其他更好的方案或者意见环境讨论。