nginx反向代理可彻底解决本地联调跨域问题：前端静态资源托管于localhost，/api路径由nginx代理至后端服务，使浏览器判定为同源请求，无需cors配置且支持cookie凭据传递。
本地联调阶段用 Nginx 彻底解决跨域，核心是让浏览器“看不见跨域”——前端页面和后端接口都走 http://localhost（同源），由 Nginx 在中间做反向代理转发。这不是绕过限制，而是从源头消除跨域判定条件。
把前端静态资源托管在 Nginx 上
前端构建后的产物（如 Vue/React 的 dist 目录）直接交给 Nginx 服务，而不是用 vite/dev-server 启动。这样访问地址统一为 http://localhost/，避免了前端开发服务器（如 :3000）与后端（如 :8000）端口不同引发的跨域。
- 将打包后的文件（如
dist/）路径填入 Nginx 配置的root指令，例如root /path/to/dist; - 添加
try_files $uri $uri/ /index.html;支持前端路由（如 Vue Router 的 history 模式） - 确保 Nginx 监听
80端口（或你指定的端口），启动后能正常打开首页
用 proxy_pass 将 /api 路径精准代理到后端
所有以 /api/ 开头的请求，由 Nginx 转发给真实后端服务（比如 http://127.0.0.1:8000），前端代码里仍写相对路径 /api/login，完全不用改源码。
- 在
location /api/ { ... }块中配置proxy_pass http://127.0.0.1:8000/;（注意末尾斜杠，决定路径拼接逻辑） - 必须加
proxy_set_header Host $http_host;，否则后端收到的 Host 可能是localhost:8000，影响鉴权或重定向 - 若后端依赖 Cookie（如带
withCredentials: true），需补上proxy_cookie_path /api /;和proxy_set_header X-Real-IP $remote_addr;
处理带凭据（Cookie/Token）的跨域请求
当登录态靠 Cookie 或 Authorization Header 传递时，浏览器要求严格匹配 origin，不能用 *，而 Nginx 代理天然满足该条件——它把请求当作“同源发出”，后端只需按常规逻辑读取凭证，无需额外配 CORS 头。
- 前端发起请求时设置
credentials: 'include'（axios 中开withCredentials: true） - Nginx 不需要返回
Access-Control-Allow-Origin: *，因为根本没触发浏览器 CORS 检查 - 若后端仍返回 CORS 头，可保留但非必需；重点是确保 Cookie 的
Domain和Path与代理路径一致（如Path=/）
验证与调试小技巧
配置生效后，浏览器 Network 面板看到的请求目标始终是 http://localhost/api/xxx，状态码 200 且响应头里没有 Access-Control-Allow-Origin 字样，就说明跨域已消失。
- 修改
nginx.conf后执行nginx -s reload（或双击 reload.bat）重载配置 - 用
curl -v http://localhost/api/test在命令行测试代理是否通，排除前端干扰 - 检查 Nginx error.log（默认在 logs/error.log），常见错误如后端未运行、proxy_pass 地址写错、权限不足等
