代理不适用于react和node

Question

我遇到了我设置的代理问题。

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

我很多次经历了这个问题，我认为这是由于缓存。要解决此问题，请执行以下操作

1. 停止您的React应用
通过在应用目录中执行
rm -r package-lock.json node_modules

2. 删除 package-lock.json 文件和 node_modules 目录。
3. 然后在应用目录中执行npm install。

现在，您在package.json中的代理将没有任何问题。

Answer 2

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

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

这个问题困扰我很久了；但是，如果您按照上述步骤操作，它将使您的React应用程序正确指向服务器。

Answer 3

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

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

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

Answer 4

这是我实现代理呼叫的方式。

1. 请勿依赖浏览器的“网络”标签。将控制台放入服务器控制器，以真正检查是否正在拨打电话。对我来说，我能够在服务器端看到日志。我的节点服务器在5000上运行，客户端在3000上运行。

“网络”标签-

服务器日志-

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

Answer 5

对我来说"proxy" = "http://localhost:5000无效，因为我在听0.0.0.0更改为"proxy" = "http://0.0.0.0:5000确实有效。

Answer 6

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

Answer 7

您的情况可能并非如此，但是我遇到了问题，因为我的服务器在localhost 5500上运行，而我将其代理到5000。

我将package.json文件更改为5500，并使用了以下脚本：

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

我敢肯定，只需在package.json上进行更改即可，但是我只是想让您知道我做了什么。

Answer 8

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

Answer 9

如果使用.env变量，请确保也检查它们。因此，如果我要在该页面上寻找解决方案。

Answer 10

确保端点与后端匹配。

Answer 11

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

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

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

这应该可以解决。

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

Answer 12

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

Answer 13

您的后端数据或文件以及 React 构建文件应位于同一服务器文件夹中。

Answer 14

您必须在名称后指定代理。Private Async Sub btnNext_Click(sender As Object, e As RoutedEventArgs) Handles btnNext.Click If cbMyComboBox.SelectedIndex < 0 Then '---->> Here lies the problem BindingExpression is always nothing? <<---- Dim be As BindingExpression = BindingOperations.GetBindingExpression(cbMyComboBox, ComboBox.TextProperty) Dim validationError As ValidationError = New ValidationError(New DataErrorValidationRule(), be) validationError.ErrorContent = "Please select a value bla bla bla" Validation.MarkInvalid(be, validationError) 'Somewhere else we remove the ValidationError when user selects a value Else 'Next step End If End Sub 端口应与您后端的端口匹配。