在 Windows 下用 Nginx 解决前端跨域问题，核心是通过反向代理在 location 块中配置 add_header 添加 Access-Control-Allow-Origin 等 CORS 头，并用 if ($request_method = 'OPTIONS') 处理预检请求返回 204；需确保 proxy_pass 正确、map 白名单动态设源、重载配置后验证响应头。
在 Windows 下用 Nginx 解决前端跨域问题，核心是正确配置 Access-Control-Allow-Origin 等响应头。不需要改前端代码、不依赖后端接口配合，Nginx 在反向代理层统一拦截并添加 CORS 头即可生效。
确认 Nginx 正在反向代理你的服务
跨域配置只在 Nginx 作为代理（而非静态文件服务器）时才有意义。例如你前端访问 http://localhost:8080，实际请求被 Nginx 转发到 https://www.php.cn/link/307527f309aa633edcc5f228a5533f25api，这时所有响应都可由 Nginx 注入 CORS 头。
- 检查
nginx.conf或sites-enabled/xxx.conf中是否有proxy_pass指令 - 确保请求路径匹配了带
location的代理块（如location /api/ { proxy_pass https://www.php.cn/link/307527f309aa633edcc5f228a5533f25; }） - 避免把 CORS 配置写在
location / {}这类根路径下——它可能干扰静态资源或健康检查接口
添加标准 CORS 响应头（支持单源 & 凭据）
在对应 location 块内加入以下配置，适用于开发环境或明确知道前端域名的场景：
location /api/ {
proxy_pass https://www.php.cn/link/307527f309aa633edcc5f228a5533f25;
<pre class="brush:php;toolbar:false;"># 允许指定源（替换为你的真实前端地址）
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
# 处理预检请求（OPTIONS）
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}}
-
Access-Control-Allow-Origin不能设为*同时启用credentials，否则浏览器会拒绝 -
if ($request_method = 'OPTIONS')是必须的——浏览器对带凭据或自定义头的请求会先发预检，Nginx 需直接返回 204，不转发给后端 - 所有
add_header指令在if块内外都要重复写，因为if是独立作用域
支持多源或动态源（谨慎使用）
若前端部署多个域名（如 dev.example.com、staging.example.com），或需适配本地不同端口调试，可用变量+白名单方式动态设置 Origin：
map $http_origin $cors_origin {
default "";
"~^http://localhost:8080$" "$http_origin";
"~^https://dev\.example\.com$" "$http_origin";
"~^https://staging\.example\.com$" "$http_origin";
}
<p>server {
listen 80;
location /api/ {
proxy_pass <a href="https://www.php.cn/link/307527f309aa633edcc5f228a5533f25">https://www.php.cn/link/307527f309aa633edcc5f228a5533f25</a>;</p><pre class="brush:php;toolbar:false;"> add_header 'Access-Control-Allow-Origin' $cors_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
# 其他头保持不变...
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $cors_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
# ...其余同上
return 204;
}
}}
-
map必须写在http块顶层，不能放在server或location内 - 正则匹配注意转义点号
\.和锚定^、$，防止恶意源伪造 - 若
$cors_origin为空（即未命中白名单），Nginx 不会添加Access-Control-Allow-Origin，浏览器自然拒绝跨域，安全可控
验证与排错要点
配置完别忘了重载 Nginx（nginx -s reload），然后用浏览器开发者工具检查响应头：
- 查看 Network → 请求 → Response Headers，确认存在
Access-Control-Allow-Origin等字段 - 如果是预检失败，看是否触发了
OPTIONS请求，且返回状态码是 204（不是 502/404） - 常见错误：忘记重启 Nginx、
add_header写在if外却没在if内重复、proxy_pass尾部斜杠缺失导致路径拼接错误 - Windows 下路径分隔符不用特别处理，但注意
nginx.conf保存为 UTF-8 无 BOM 格式，避免解析异常
