nginx反向代理可解决跨域问题，核心是统一协议、域名、端口以满足同源策略；需正确配置proxy_pass路径、透传host/ip等请求头、主动响应options预检，并将静态资源与api通过同一域名统一出口。
直接用 Nginx 反向代理，让前端请求“看起来”始终来自同一源，跨域限制自然消失。这不是绕过安全机制，而是合理利用浏览器同源策略的判定逻辑——只要协议、域名、端口一致，就视为同源。
明确代理路径与后端地址
核心是把前端发往 /api 的请求，由 Nginx 转发到真实后端服务（比如 http://localhost:3000 或 http://api.example.com）。关键在于路径映射要清晰，避免 trailing slash 导致 URL 拼接错误。
- 若后端地址是
http://localhost:3000，且接口路径为/user/list，则proxy_pass后不要加斜杠：proxy_pass http://localhost:3000; - 若后端地址是
http://localhost:3000/api，且你希望前端仍调/api/user/list，则写成：proxy_pass http://localhost:3000/api/;（末尾带斜杠） - 路径重写可选：用
rewrite ^/api/(.*)$ /$1 break;把/api/user变成/user再转发，适合后端不带统一前缀的情况
保留原始请求上下文
后端服务需要知道真实客户端 IP 和原始 Host，否则日志、鉴权、生成跳转链接等可能出错。Nginx 默认不透传这些信息，必须显式设置。
-
proxy_set_header Host $host;—— 传递浏览器访问的 Host（如 myapp.com），而非后端地址 -
proxy_set_header X-Real-IP $remote_addr;—— 提供真实客户端 IP -
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;—— 支持多层代理时链式记录 IP -
proxy_set_header X-Forwarded-Proto $scheme;—— 告诉后端当前是 http 还是 https，避免重定向循环
主动处理 OPTIONS 预检请求
浏览器对非简单请求（如带 Authorization 头、Content-Type 为 application/json）会先发 OPTIONS 请求探路。如果后端没实现或返回不合规，代理层需兜底响应，否则请求直接失败。
- 在对应 location 块内添加：
if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin '*'; add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; add_header Access-Control-Allow-Credentials 'true'; add_header Access-Control-Max-Age 1728000; add_header Content-Length 0; return 204; } - 注意：
add_header在 if 块中生效，且Access-Control-Allow-Origin不能和Access-Control-Allow-Credentials: true同时用*，生产环境建议指定具体域名
静态资源与 API 统一入口
开发时前端跑在 localhost:8080，后端在 localhost:3000；上线后两者应共用一个域名（如 app.example.com），Nginx 就是这个统一出口。
- 前端静态文件走 root：如
location / { root /var/www/myapp; index index.html; } - API 请求走代理：如
location /api { proxy_pass http://backend; }，其中 backend 是 upstream 定义的后端组 - 这样浏览器地址栏始终是
https://app.example.com，所有请求都属同源，彻底规避跨域
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
