JS 中生产环境中 Nginx 怎么配置反向代理彻底解决跨域问题-js教程-PHP中文网

javascript本身不能配置nginx，nginx是服务端反向代理工具，需在nginx.conf中配置location /api/块，通过proxy_pass转发请求并透传请求头，前端须将api请求改为相对路径（如"/api/users"），浏览器视为同源，跨域问题彻底解决。

js 中生产环境中 nginx 怎么配置反向代理彻底解决跨域问题

JavaScript 本身不能配置 Nginx，Nginx 是服务端工具，它的反向代理配置必须写在服务器的 nginx.conf 或站点配置文件中。前端只需把请求地址改成相对路径（如 /api/users），剩下的全部由 Nginx 在请求到达时拦截、转发、透传头信息并返回响应——浏览器全程看到的是同源请求，跨域问题自然消失。

核心 Nginx 配置：正确代理 /api 路径

假设你的前端静态资源部署在 /var/www/myapp，后端 API 地址是 https://api.example.com/v1，需将所有以 /api/ 开头的请求代理过去：

location 块必须带斜杠结尾：location /api/ { ... } —— 这样才能精确匹配前缀，避免误伤 /api.html 等静态文件
proxy_pass 后的斜杠决定路径是否剥离：写成 proxy_pass https://api.example.com/;（末尾有 /），浏览器请求 /api/v1/users 会被转发为 https://api.example.com/v1/users
必须透传关键请求头，否则后端拿不到真实 IP 和协议：
proxy_set_header Host api.example.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
若后端用 HTTPS 自签名证书，临时加 proxy_ssl_verify off;（生产环境应配可信证书，禁用验证仅用于调试）

前端代码必须同步调整

JS 中所有直接写死后端域名的请求都要改为相对路径，否则 Nginx 根本收不到请求，跨域照旧发生：

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

❌ 错误写法：fetch("https://api.example.com/v1/users")
✅ 正确写法：fetch("/api/v1/users")（注意开头是 /，不是 // 或协议名）
如果项目用 Axios，统一设置 baseURL: "/api" 即可，后续所有请求自动拼接前缀
确保打包后的 HTML、JS、CSS 都部署在同一 Nginx server 块下，且 root 指向正确目录，避免 /api/ 被当作静态文件返回 404

处理预检请求（OPTIONS）和 WebSocket

带自定义 Header（如 Authorization）或非简单 Content-Type 的请求，浏览器会先发 OPTIONS 预检。后端若未实现，需在 Nginx 层兜底响应：

在 location /api/ 块内添加：

if ($request_method = 'OPTIONS') {<br>
    add_header Access-Control-Allow-Origin '*';<br>
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';<br>
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';<br>
    add_header Access-Control-Allow-Credentials 'true';<br>
    add_header Access-Control-Max-Age 1728000;<br>
    add_header Content-Length 0;<br>
    return 204;<br>
  }

若用 WebSocket（如 Socket.IO），必须显式启用升级协议：

proxy_http_version 1.1;<br>
  proxy_set_header Upgrade $http_upgrade;<br>
  proxy_set_header Connection "upgrade";

避坑要点：路径冲突与多环境一致性

Nginx 配置看似简单，但几个细节错一个就导致代理失效：

静态资源别和 API 路径重名：比如打包后生成了 /api/index.html，Nginx 会优先返回该文件而非走 proxy。建议前端构建时排除 api 目录，或用 try_files $uri @proxy; 显式 fallback
开发与生产路径要一致：本地用 Webpack DevServer proxy 只是临时方案，上线前务必把所有 proxy 配置删掉，改用 Nginx 统一代理，避免环境差异引发线上故障
检查 Nginx 是否重载生效：修改配置后执行 nginx -t 验证语法，再 nginx -s reload，不要只改文件不重启
日志是第一排查依据：开启 error_log /var/log/nginx/api_proxy_error.log debug;，可快速定位是 404（路径没匹配）、502（后端不可达）还是 500（头透传失败）