代理不适用于反应和节点

Posted 2023-02-22

【中文标题】代理不适用于反应和节点

【英文标题】：proxy not working for react and node

【发布时间】：2018-06-25 19:02:33

【问题描述】：

我设置的代理有问题。

这是我的根 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？

【参考方案1】：

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

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

停止您的 React 应用程序 删除 package-lock.json 文件和 node_modules 目录，方法是在应用程序目录中执行 rm -r package-lock.json node_modules。 然后在应用目录中执行npm install。

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

【讨论】：

实际上只是删除 package-lock.json 并重新启动对我有用，所以您可能想在重新安装 node_modules 之前先尝试一下。

你成功了！如果您使用的是 create-react-app 这应该是接受的答案。谢谢

有效！谢谢老哥！

停止 React 应用程序后，以下内容对我有用。 1. 删除 package-lock.json 2. npm i --package-lock-only # 重新创建 package-lock

我删除了 package-lock.json 并重新启动了 npm start 并且 package-lock.json 从未重新创建。我做了 npm i --package-lock-only 并且它重新创建了 package-lock 但 package-lock 仍然没有像我在 package.json 中那样显示对代理的任何引用

【参考方案2】：

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

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

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

【参考方案3】：

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

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

网络标签 -

服务器日志 -

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

【讨论】：

确保检查 url。它应该以 / 开头。如果您在页面localhost/user 上，那么没有第一个斜线fetch('api/hello') 将解析为localhost/user/api/hello，它本来应该转到localhost/api/hello

【参考方案4】：

你的客户端是从http://localhost:8080加载的吗？

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

如果您想这样更改端口，则需要指定一个绝对 URL。在您的情况下，这将是 fetch('http://localhost:5000/api/hello');，尽管您可能希望动态构建它，因为最终您将不会在 localhost 上运行以进行生产。

【讨论】：

我明白了，但代理不应该处理这个问题吗？如果不存在，将其放在那里的目的是什么？

您到底认为什么会利用您在那里设置的“代理”值？您的脚本让我相信您正在使用 webpack-dev-server 进行开发，但它不会从 package.json 中获取 proxy 设置。它将您的 webpack 配置用于任何 proxy 设置，如文档 here

中所示

我误解了那部分。感谢您的澄清。

【参考方案5】：

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

【参考方案6】：

对我来说，"proxy" = "http://localhost:5000 不起作用，因为我正在收听 0.0.0.0，将其更改为 "proxy" = "http://0.0.0.0:5000 确实有效。

【讨论】：

尝试了多种解决方案，终于成功了。

【参考方案7】：

我试图通过使用这么多解决方案来解决这个问题，但对我没有任何帮助。经过大量研究，我发现下面给出的这个解决方案解决了我的代理问题并帮助我将前端与节点服务器连接起来。这些步骤是，

关闭所有终端，以便我可以同时停止前端和后端服务器。 在我的节点 server.js 文件上安装了 Cors。

npm install cors

并将这些行添加到 server.js 文件中

var cors = require('cors')

app.use(cors())

在前端或客户端文件夹的 package.json 文件中，我添加了这一行，

"proxy" : "http://127.0.0.1:my_servers_port_address_"

现在一切正常。

【参考方案8】：

你的情况可能不是这样，但我遇到了问题，因为我的服务器在 localhost 5500 上运行，而我将它代理到 5000。

我更改了我的 package.json 文件以将其更改为 5500 并使用此脚本：

npm 配置设置代理http://proxy.company.com:8080 npm 配置设置 https-proxy http://proxy.company.com:8080

我很确定只是在 package.json 上更改它是有效的，但我只是想让你知道我做了什么。

【讨论】：

是的，只需在 package.json 文件中进行更改即可。我认为使用被代理搞砸的脚本。

【参考方案9】：

如果您使用它们，请务必检查您的 .env 变量。正是因为如此，如果我在该页面上寻找解决方案。

【参考方案10】：

这个解决方案对我有用，特别是如果你使用 webpack。

转到您的 webpack.config.js > devServer > 添加以下内容

代理： '/api':'http://localhost:3000/', ,

这应该可以解决。

阅读更多关于 webpack devSever 代理的信息：https://webpack.js.org/configuration/dev-server/#devserver-proxy

【参考方案11】：

我尝试了这里提出的所有解决方案，但没有奏效。然后我发现，我试图从根目录（即fetch('/')）获取，但由于某种原因它不正确。使用 fetch('/something') 帮助了我。

【参考方案12】：

您的后端数据或文件和 react 构建文件应该在同一个服务器文件夹中。

【讨论】：

这是一个意见不回答。能具体点吗？

它是一种与后端 api 通信的方式，否则当您在服务器上部署应用程序时，如果您使用代理作为后端的基本 uri，您将面临 404 not found 错误。

是的，请具体说明您回复我的方式，并在您的回答中提供了更多详细信息。

【参考方案13】：

你必须在名字后面加上代理。"name":"Project Name", "proxy":"http://localhost:5000" 端口应与您的后端端口匹配。

【参考方案14】：

您应该将代理地址设置为您的后端服务器，而不是响应客户端地址。 更改package.json后应该重启客户端 你应该使用fetch('/api/...')（而不是fetch('http://localhost:8080/api/')）

【参考方案15】：

确保您的端点与后端匹配。