JavaScript本身不能配置Nginx，Nginx是服务端反向代理工具，需在nginx.conf中配置location /api/块，通过proxy_pass转发请求并透传请求头，前端须将API请求改为相对路径（如"/api/users"），浏览器视为同源，跨域问题彻底解决。
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 根本收不到请求，跨域照旧发生：
- ❌ 错误写法：
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（头透传失败）
