跨域配置

一、跨域的基本概念

跨域问题通常发生在浏览器中，当一个网页尝试从不同的域名、协议或端口请求资源时，浏览器会阻止这种请求，除非服务器明确允许。

Nginx 通过设置响应头中的 Access-Control-* 系列字段来控制跨域访问。

二、常用 CORS 响应头

响应头 描述
Access-Control-Allow-Origin 指定允许访问的来源（Origin），可以是具体的域名或通配符 *。
Access-Control-Allow-Methods 指定允许的 HTTP 方法（如 GET, POST, PUT, DELETE 等）。
Access-Control-Allow-Headers 指定允许的自定义请求头。
Access-Control-Expose-Headers 指定允许客户端访问的额外响应头（默认只允许标准头）。
Access-Control-Max-Age 预检请求（OPTIONS 请求）的结果缓存时间（单位：秒）。
Access-Control-Allow-Credentials 是否允许发送凭据（如 Cookie 或 Authorization 头），值为 true 或 false。

三、Nginx 配置跨域

server {
    listen 80;
    server_name example.com;

    location /api {
        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://example-client.com';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
            add_header 'Access-Control-Allow-Credentials' 'true';
            return 204;  # 对于预检请求返回 204 No Content
        }
        # add_header 'Access-Control-Allow-Origin' 'https://example-client.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        add_header 'Access-Control-Allow-Credentials' 'true';  # 如果需要支持凭据

        # 正常请求处理
        proxy_pass http://backend_server;
    }
}