Nginx 跨域配置中怎么配置以支持前端开发人员在本地使用 localhost 进行无障碍联调-Nginx-PHP中文网

最稳定且不依赖后端修改的联调方案是用本地nginx反向代理统一前端与后端入口至同域（如localhost:8088），通过路径分流代理静态资源和/api接口，正确处理options预检请求并透传关键请求头。

nginx 跨域配置中怎么配置以支持前端开发人员在本地使用 localhost 进行无障碍联调

直接在本地用 Nginx 做反向代理，把前端页面和后端接口“拉到同一个域下”，就能彻底绕过浏览器同源策略——这是最稳定、不依赖后端改代码的联调方案。

别硬套 80 端口，选一个空闲端口（比如 8088）专供开发联调用。这样既不影响其他服务，也避免权限问题：

前端项目通常走本地文件服务（如 Webpack Dev Server 的 http://localhost:8080），后端接口跑在另一个地址（如 http://127.0.0.1:8000）。Nginx 需按路径分流：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

location / { proxy_pass http://localhost:8080/; } —— 把根路径全部代理到前端开发服务器
location /api/ { proxy_pass http://127.0.0.1:8000/; } —— 所有带 /api/ 前缀的请求，转发给后端
注意 proxy_pass 末尾是否加 /：加了会截掉匹配前缀；不加则保留完整路径

当请求带自定义头（如 Authorization）、用 PUT/DELETE 方法，或 Content-Type 不是 application/x-www-form-urlencoded 时，浏览器会先发一次 OPTIONS 请求。Nginx 要主动响应它：

在 API 代理块内添加：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";
if ($request_method = 'OPTIONS') { return 204; } —— 直接返回空成功响应，不转发给后端

有些后端逻辑依赖 Host、X-Forwarded-For 或真实 IP，代理时不能丢：

proxy_set_header Host $host; —— 保持原始 Host 头，避免后端路由错乱
proxy_set_header X-Real-IP $remote_addr; 和 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
如果前端需要携带 Cookie，还得加 proxy_set_header X-Forwarded-Proto $scheme; 和 proxy_cookie_path / "/; Secure; HttpOnly;"（开发环境可简化）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！