一、常见跨域相关问题
在前端开发中，常遇到以下问题：
- 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状态码，终止请求处理 }}三、配置注意事项
- 作用域限制：
上述配置必须嵌套在location块内，确保仅对指定路径生效（示例中location /表示所有路径）。 - 指令格式规范：
若出现nginx: [emerg] unknown directive错误，通常是if指令格式错误导致。
正确格式：if ( $request_method = 'OPTIONS' ) { return 200; }
- 四、配置参数解析
| 响应头 / 指令 | 说明 |
|---|---|
Access-Control-Allow-Origin | 指定允许访问的域名，*表示所有域名；若需携带 Cookie，需指定具体域名（不能使用*）。 |
Access-Control-Allow-Methods | 允许的 HTTP 请求方法，如 GET、POST 等，需包含 OPTIONS 以处理预检请求。 |
Access-Control-Allow-Credentials | 设为true时，允许浏览器携带认证信息（如 Cookie），但Access-Control-Allow-Origin不可使用*。 |
if ( $request_method = 'OPTIONS' ) | 匹配 OPTIONS 请求，直接返回 200 状态码，避免服务器因未定义该方法而报错。 |
五、生产环境优化建议
- 域名限制：将
Access-Control-Allow-Origin设为具体域名（如add_header Access-Control-Allow-Origin https://yourdomain.com;），提升安全性。 - 缓存策略：可添加
add_header Access-Control-Max-Age 86400;（单位：秒），缓存预检请求结果，减少重复请求。 - 路径细分：根据业务需求，将跨域配置应用于特定
location路径（如location /api/），避免全局生效。
