Nginx处理CORS问题

27 min read

  1. 打开Nginx配置文件。这通常位于/etc/nginx/nginx.conf，或者在/etc/nginx/sites-available/目录下的特定站点配置文件中。

  2. 配置CORS。在适当的server块或location块中添加配置，以支持CORS。以下是一个添加了CORS支持的location块示例：

server {
    listen 80;
    server_name your-server.com;

    location / {
        # 设置CORS头部
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }

        # 你的代理或实际的内容服务配置
        # 例如代理到后端应用
        # proxy_pass http://your_backend;
    }

    # 其他配置...
}

这个配置示例允许来自任何源的跨域请求，并处理OPTIONS预检请求，为GET和POST请求设置了适当的CORS响应头。这样配置后，即使请求的资源不存在，Nginx也会首先检查请求方法并应用CORS规则，然后再处理请求结果（包括404状态码的返回）。

  1. 重新加载Nginx配置。修改配置文件后，需要重新加载Nginx以使更改生效。可以使用以下命令来重新加载配置：
sudo nginx -s reload

这样配置后，Nginx会处理跨域请求并正确返回状态码，包括当请求的资源不存在时返回404。这就确保了即使在跨域的情况下，前端应用也能接收到预期的HTTP状态码，从而能够根据这些状态码进行适当的错误处理或用户反馈。