如何配置Nginx基于端口的虚拟主机解决前后端端口不一致跨域-Nginx-PHP中文网

Nginx端口级反向代理通过统一80端口接收请求，按路径（如/api/）转发至后端3000等端口，使浏览器视为同源，从而规避跨域限制；需注意proxy_pass末尾斜杠、路径唯一性及后端服务可用性。

如何配置nginx基于端口的虚拟主机解决前后端端口不一致跨域

直接用 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）。