代理不适用于react和节点

IT技术 node.js reactjs webpack proxy package.json
2021-05-05 02:45:15

我设置的代理有问题。

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

请求总是转到

指向 http://localhost:8080/api/hello 的标头图片

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

4个回答

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

@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 中的代理不会有任何问题。

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

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

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

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

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

如果要像这样更改端口，则需要指定绝对 URL。在您的情况下fetch('http://localhost:5000/api/hello');，虽然您可能希望动态构建它，因为最终您将不会继续localhost生产。

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

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

网络选项卡 -

开发工具网络选项卡

服务器日志 -

服务器

  1. /api/hello通过邮递员或浏览器检查您的服务器是否真的在同一路径上运行。对我来说是/api/user/register，我试图击球/api/user
  2. 使用 cors 包来禁用跨域访问问题。
其它你可能感兴趣的问题
上一篇这款为 NASA 打造的火星栖息地 3D 打印机如何工作？ 下一篇PLA线不粘在床上