Nginx 跨域问题解决及 OPTIONS 请求处理详解

Nginx 跨域问题解决及 OPTIONS 请求处理详解

一、常见跨域相关问题

在前端开发中，常遇到以下问题：

• JavaScript 跨域限制：浏览器出于安全策略，禁止不同源的资源交互（源指域名、端口、协议的组合）。
• HTTP 405 错误：服务器返回 “Method Not Allowed”，表明请求方法不被允许，常见于 OPTIONS 预检请求未正确处理时。
• Nginx 处理 OPTIONS 方法异常：当浏览器发送跨域预检请求（OPTIONS）时，Nginx 若未配置相应规则，会导致请求失败。

二、Nginx 跨域配置方案

在 Nginx 的location块中添加以下配置，可有效解决跨域问题：

nginx

location / {
    # 跨域响应头设置  
    add_header Access-Control-Allow-Origin *;          # 允许所有域名访问（生产环境建议指定具体域名）
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';  # 允许的请求方法
    add_header 'Access-Control-Allow-Credentials' 'true';  # 允许携带认证信息（如Cookie）
    
    # 处理OPTIONS预检请求  
    if ( $request_method = 'OPTIONS' ) {  
        return 200;  # 直接返回200状态码，终止请求处理
    }
}

三、配置注意事项

1. 作用域限制：
   上述配置必须嵌套在location块内，确保仅对指定路径生效（示例中location /表示所有路径）。
2. 指令格式规范：
   若出现nginx: [emerg] unknown directive错误，通常是if指令格式错误导致。
   正确格式：if ( $request_method = 'OPTIONS' ) { return 200; }
   • 关键点：if后必须有空格，且括号与变量间需保留空格（如$request_method前的空格）。

四、配置参数解析

五、生产环境优化建议

1. 域名限制：将Access-Control-Allow-Origin设为具体域名（如add_header Access-Control-Allow-Origin https://yourdomain.com;），提升安全性。
2. 缓存策略：可添加add_header Access-Control-Max-Age 86400;（单位：秒），缓存预检请求结果，减少重复请求。
3. 路径细分：根据业务需求，将跨域配置应用于特定location路径（如location /api/），避免全局生效。