Nginx端口级反向代理通过统一80端口接收请求，按路径（如/api/）转发至后端3000等端口，使浏览器视为同源，从而规避跨域限制；需注意proxy_pass末尾斜杠、路径唯一性及后端服务可用性。
直接用 Nginx 做端口级反向代理，把前端请求（比如 80 端口）按路径转发到后端服务（比如 3000 或 8080），就能绕过浏览器跨域限制——这不是“解决跨域”，而是让浏览器认为所有请求都来自同一源。
明确目标：用端口区分前后端流量
典型场景：前端静态文件跑在 http://localhost:80（Nginx 提供），后端 API 跑在 http://localhost:3000（如 Express、Spring Boot）。浏览器访问页面时，AJAX 请求发往 /api/xxx，Nginx 拦截该路径，转给 3000 端口，前端代码里不用写完整 URL，自然不跨域。
基础配置：监听端口 + 路径匹配转发
在 /etc/nginx/conf.d/default.conf 或主配置中添加：
}
server {
listen 80;
server_name localhost;
<pre class='brush:php;toolbar:false;'># 前端静态资源（HTML、JS、CSS）
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
# 后端 API 统一走 /api/ 开头的路径
location /api/ {
proxy_pass http://127.0.0.1:3000/;
proxy_set_header Host $host;
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_pass 结尾的 /：有斜杠表示去掉
/api/前缀再转发；没斜杠会原样带上/api/发给后端，容易 404。 - 后端接口实际路径应是
http://localhost:3000/users，前端调用/api/users即可。 - 无需额外配 CORS 头，因为浏览器看到的是同源请求（都是 80 端口）。
进阶：多个后端服务共存（不同端口）
若还有管理后台 API 在 8081、文件服务在 9000，可扩展 location 块：
location /admin-api/ {
proxy_pass http://127.0.0.1:8081/;
}
location /file/ {
proxy_pass http://127.0.0.1:9000/;
}
- 每个 location 独立指向不同后端端口，路径前缀即“虚拟边界”。
- 确保后端服务允许被代理（如 Express 不强制校验 Host，Spring Boot 默认接受）。
- 避免路径重叠，比如
/api/和/api-v2/要分开写，否则可能误匹配。
验证与调试要点
改完配置后执行：nginx -t && nginx -s reload
- 打开浏览器开发者工具 → Network 标签，查看请求 URL 是否仍显示
http://localhost/api/xxx，状态码是否为 200。 - 检查响应头中是否有
X-Proxy-By: nginx类似标识（可手动加add_header X-Proxy-By nginx;辅助判断）。 - 用
curl -v http://localhost/api/test直接测试，看返回是否来自后端服务，而非 Nginx 404。 - 如果返回 502，大概率是后端没启动、端口错、或防火墙拦截（Linux 可查
ss -tuln | grep :3000）。
