Nginx 解决跨域问题

跨域资源共享（CORS）是浏览器的一种安全特性，用于限制网页从一个域请求另一个域的资源。当您在使用 Nginx 部署 Web 应用时，可能会遇到跨域问题。本文将介绍如何通过 Nginx 配置解决跨域问题。

1. 什么是跨域

跨域指的是在一个域（如 example.com）中请求另一个域（如 api.example.com）的资源。浏览器出于安全考虑，会阻止这种请求，除非目标服务器允许。

2. Nginx 配置 CORS

要在 Nginx 中解决跨域问题，您需要在配置文件中添加相应的响应头。以下是常见的 CORS 配置示例。

2.1 允许所有域

如果您希望允许所有域访问，可以在 Nginx 配置文件中添加以下配置：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        
        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' 'Content-Type, Authorization';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 其他配置...
    }
}

2.2 允许特定域

如果您只想允许特定的域访问，可以将 '*' 替换为具体的域名：

add_header 'Access-Control-Allow-Origin' 'http://example.com';

2.3 允许多域

如果需要允许多个特定域，可以使用 map 指令：

map $http_origin $allow_origin {
    default '';
    'http://example.com' $http_origin;
    'http://another-example.com' $http_origin;
}

server {
    listen 80;
    server_name your_domain.com;

    location / {
        add_header 'Access-Control-Allow-Origin' $allow_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' $allow_origin;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 其他配置...
    }
}

3. 重新加载 Nginx 配置

在您修改了 Nginx 配置文件后，记得重新加载配置：

sudo nginx -s reload

4. 测试 CORS 配置

您可以使用浏览器的开发者工具或工具如 Postman 进行测试，检查响应头中是否包含 Access-Control-Allow-Origin 等 CORS 相关头部。

5. 注意事项

• 安全性：允许所有域（'*'）可能带来安全风险，建议根据实际需求配置允许的域。
• 预检请求：对于复杂请求，浏览器会先发送 OPTIONS 请求以检查服务器的支持情况，确保 Nginx 配置能够正确处理该请求。