Nginx配置Vue+Express服务时/api子路由返回404问题咨询

问题根因 #

问题出在Nginx proxy_pass 末尾斜杠的匹配规则，你现在访问/api/users时，上游Express服务实际收到的请求路径是//users，和你注册的/users路由不匹配，所以返回404。 #

解决方案 #

方案1：适配现有Express路由（推荐，无需修改后端代码）

直接修改Nginx配置，在转发前去掉/api前缀：

location ^~ /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_redirect off;
        # 新增rewrite规则，剥离/api前缀后转发到上游
        rewrite ^/api(/.*)?$ $1 break;
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
}

修改后执行nginx -t检查配置合法性，校验通过后执行nginx -s reload重载配置即可生效。该方案下访问/api会转发到Express的/路由，访问/api/users会转发到Express的/users路由，完全符合预期。

方案2：修改Express路由适配现有Nginx配置

如果不想调整Nginx配置，可以直接给Express路由统一加上/api前缀：

app.use('/api', _index["default"]);
app.use('/api/users', _users["default"]);

该方案无需调整Nginx，但本地开发调试时也需要带/api前缀，灵活性不如方案1。 #

验证方法 #

可以在Express代码中新增请求日志打印，确认转发路径是否符合预期：

app.use((req, res, next) => {
  console.log('收到请求：', req.method, req.path);
  next();
})

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