☰

当为 REST API 定义多个端口时，nginx 反向代理不起作用

tag-icon • tag-icon nginx nginx-reverse-proxy
当为 REST API 定义多个端口时，nginx 反向代理不起作用

我有一个下一个 js 应用程序，我将其部署在端口 3000 上，并在 nginx 上设置了代理 3000。

现在我有自定义的 Node js 后端服务器，我想在同一台服务器上的不同端口 5000 上运行它。

我这样设置 nginx

location / {
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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 http://localhost:3000;
    }
location ^~ /api {
        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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    http://localhost:5000;
            
        }

我在 example.com 上访问应用程序没有任何问题。我设置了位置 /api 以连接 server.js / api 获取。

当我像这样获取时

axios.get(example.com/api)

其返回错误——无法获取/api/

但是当我像这样设置 nginx 位置代理时

proxy_pass    http://localhost:5000/;

带有正斜杠，其正常工作并且 axios 正在成功获取数据。

但每当我尝试从 server.js 文件中获取另一条路由时

axios.get(example.com/api/credential)

它再次显示错误，像这样

Cannot GET //credential

返回双斜杠 // 凭证

通过获取 example.com/api，从 server.js 中唯一有效的 '/' 路由

如果代理上没有正斜杠，则会返回错误。无法获取 /api 或无法获取 api/credential

请帮忙。提前致谢。

更新

我修复了伊凡的答案。现在我遇到了与该配置相关的新问题。我在 axios 旁边使用 socket.io。因此，每当我尝试通过 socket.io 连接时，我的客户端套接字代码都是 ..

import io from "socket.io-client";
const socket = io("https://example.com/api");

并且服务器套接字配置是..

const io = require("socket.io")(server, {
  cors: {
    origin: "*",
  },
});

现在，当页面加载时，控制台正在记录。

GET https://example.com/socket.io?EIO=4&transport=polling&t=O4UTf4l 404 (Not Found)

请帮忙。

答案1

一般来说，你应该总是选择

location /prefix/ {
    ...
}

在

location /prefix {
    ...
}

除非您代理的是单个 API 端点，而不是整个 API（或另一个 Web 应用程序）。当您将 URI 前缀与指令一起使用时proxy_pass（即，proxy_pass http://localhost:5000/;而不是proxy_pass http://localhost:5000;，尾部斜杠在此处算作 URI 前缀），nginx 将从请求 URI 中删除指令中指定的前缀location，并在其前面加上 中指定的前缀proxy_pass。使用

location ^~ /api/ {
    ...
    proxy_pass http://localhost:5000/;
}

并且您的/api/credential请求 URI 将正确传递给您的上游/credential。

相关内容