代理不适用于反应和节点

Question

我设置的代理有问题。

这是我的根 package.json 文件：

"scripts": {
    "client": "cd client && yarn dev-server",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
}

我的客户端 package.json 文件：

"scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
},
"proxy": "http://localhost:5000/"

我已经在我的服务器端设置了 express 在端口 5000 上运行。每当我向服务器发出请求时，即：

callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    // ... more stuff
}

请求总是转到

有人可以指出我必须做些什么来解决这个问题，以便请求实际上转到端口 5000？

Answer 1

我多次遇到这个问题，我认为这是因为缓存。要解决此问题，请执行以下操作

@mkoe 说他可以通过删除package-lock.json文件并重新启动应用程序来解决此问题，因此请先尝试一下。如果这不能解决它，请执行以下操作。

1. 停止你的 React 应用
2. 通过在 app 目录中执行删除package-lock.json文件和node_modules
   rm -r package-lock.json node_modules
   目录。
3. 然后npm install在app目录下做。

现在你在 package.json 中的代理不会有任何问题。

Answer 2

我遇到这个问题已经好几个小时了，我确信上面的一些事情可能是其他情况下的原因。然而，就我而言，我正在使用Vite，并且我一直在尝试将我的代理添加到文件中package.json，而它应该添加到vite.config.js文件中。您可以点击此处阅读 Vite 文档。

最后，我的代码如下所示：

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        secure: false,
      },
    },
  },
  plugins: [react()],
});

Answer 3

反应应用程序仍然指向 localhost:8080 的原因是因为缓存。要清除它，请按照以下步骤操作。

1. 删除package-lock.json并node_modules在 React 应用程序中
2. npm install在 React App 上再次关闭 React Terminal 和所有依赖项
3. 重新打开 React App，代理现在应该可以工作了

这个问题困扰我很久了；但是如果你按照上面的步骤操作，它应该会让你的 React 应用程序正确地指向服务器。

Answer 4

您的客户端是否正在加载http://localhost:8080？

默认情况下，fetchapi 在没有绝对 URL 的情况下使用时，将镜像客户端页面的主机（即主机名和端口）。因此，fetch('/api/hello');从运行 at 的页面调用http://localhost:8080将导致fetchapi 推断您希望将请求发送到http://localhost:8080/api/hello.

You will need to specify an absolute URL if you want to change the port like that. In your case that would be fetch('http://localhost:5000/api/hello');, although you probably want to dynamically build it since eventually you won't be running on localhost for production.

Answer 5

对我来说"proxy" = "http://localhost:5000不起作用，因为我正在听0.0.0.0改变它以使其"proxy" = "http://0.0.0.0:5000起作用。

Answer 6

确保将其放在客户端（react）的 package.json 上，而不是放在服务器端（node）的 package.json 上。

Answer 7

这就是我实现代理调用的方式。

1. 不要依赖浏览器的网络选项卡。将控制台放在您的服务器控制器中以真正检查是否正在发出呼叫。对我来说，我能够在服务器端看到日志。我的节点服务器在 5000 上运行，客户端在 3000 上运行。

网络选项卡 -

服务器日志 -

2. /api/hello通过邮递员或浏览器检查您的服务器是否真的在同一路径上运行。对我来说是/api/user/register，我试图击球/api/user
3. 使用 cors 包来禁用跨域访问问题。