Nginx配置proxy_pass时如何实现浏览器地址显示目标3000端口

你当前使用的proxy_pass属于反向代理机制，本身特性就是保持浏览器地址栏不变，仅在NGINX层把请求转发到后端服务，完全不符合你需要修改地址栏的需求。你要实现的效果需要触发浏览器端跳转，具体配置方案如下：

1. 替换原有NGINX配置 #

将你监听80端口的nuxtwoo.example.com对应server块配置修改为：

server {
    listen 80;
    server_name nuxtwoo.example.com;

    location / {
        # 临时跳转到带3000端口的地址，自动保留完整请求路径和参数
        return 302 http://$host:3000$request_uri;
    }
}

2. 配置说明 #

• $host变量会自动匹配你访问的域名nuxtwoo.example.com，无需硬编码
• $request_uri变量会自动携带完整的请求路径、查询参数，比如你访问nuxtwoo.example.com/blog?id=2会自动跳转到http://nuxtwoo.example.com:3000/blog?id=2
• 本地开发优先使用302临时跳转，避免301永久跳转被浏览器缓存，后续修改配置需要清缓存才能生效的问题

3. 验证步骤 #

修改配置后执行nginx -s reload重载配置，清空浏览器缓存或者用无痕窗口访问测试即可。

注意事项 #

请确保你本地运行的Nuxt服务监听的是0.0.0.0:3000而非仅127.0.0.1:3000，否则通过域名加3000端口访问时会出现连接失败的问题。

内容的提问来源于stack exchange，提问作者anon