JavaScript无法解决生产跨域问题，必须通过Nginx反向代理将/api/请求转发至后端API，前端改用相对路径发起请求，使浏览器同源，彻底规避CORS限制。
JavaScript 本身无法“使用 Nginx 代理”，Nginx 是服务器端反向代理工具，它在浏览器和后端 API 之间拦截并转发请求，从而让前端 JavaScript 发起的请求看起来是同源的——这才是解决生产环境跨域问题的根本方式。
为什么前端不能靠 JS 解决生产跨域
浏览器的同源策略由客户端强制执行，fetch / axios 等任何 JS 请求都无法绕过。开发时用 Webpack DevServer 的 proxy 或 Chrome 插件只是临时方案，上线后无效。真正的跨域治理必须落在服务端：要么后端加 CORS 响应头（有安全与灵活性限制），要么用 Nginx 做路径级反向代理，把 API 请求“伪装”成本地资源。
核心配置：Nginx 反向代理到后端 API
假设你的前端静态资源部署在 /var/www/myapp，API 接口地址是 https://api.example.com/v1，你想把所有 /api/ 开头的请求代理过去：
nginx.conf 片段：
立即学习“Java免费学习笔记（深入）”；
location /api/ {
proxy_pass https://api.example.com/;
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;
proxy_ssl_verify off; # 若后端用自签名证书才需此项（生产慎用）
}
注意：proxy_pass 后的斜杠 / 至关重要——它会剥离 /api/ 前缀再转发。例如浏览器请求 /api/users，实际发给后端的是 https://api.example.com/users。
前端代码要配合改写请求路径
原来 JS 中写的：
fetch("https://api.example.com/v1/users")
要改成相对路径：
fetch("/api/v1/users")
这样请求先到达 Nginx，被匹配到 location /api/ 规则，再由 Nginx 转发出去。对浏览器而言，全程都是同源（同一域名、端口），彻底规避跨域报错。
进阶要点：避免踩坑
-
不要漏掉 static 文件路径冲突：确保
/api/不和前端打包后的静态资源（如/api.html）重名，否则 Nginx 可能优先匹配到 root 下的文件而跳过 proxy -
WebSocket 需额外配置：若接口含 ws/wss，需显式开启升级头：
proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; -
跨域 Cookie 传递：如果后端依赖带凭证的请求（如
credentials: 'include'），需在 Nginx 中加proxy_cookie_path / "/";并确保后端响应Access-Control-Allow-Credentials: true和具体域名而非*
