将代理添加到 react package.json 后,不断收到“代理错误:无法代理请求”错误

IT技术 node.js reactjs proxy localhost
2021-05-04 19:47:55

我正在遵循这个基本指南来设置一个同时运行 react 和 node 的本地开发环境。在 react 目录的 package.json 中添加“代理”:“ http://localhost:4001 ”语句后,我被卡住了它一直说:代理错误:无法将请求 /flower 从 localhost:51427 代理到http://localhost:4001

环境:不涉及身份验证。它只是一个样板 node.js 和 create-react-app 设置。create-react-app 版本是 3.0.1。我正在使用 Mac。

我尝试了以下方法来解决这个问题:

  1. 我验证了服务器运行正常并且 localhost:4001 确实提供了数据。
  2. 我检查了浏览器开发工具,看到错误是 GET http://localhost:51427/flower 500 (Internal Server Error)
  3. 我还在服务器的 package.json 中添加了“--ignore client”
  4. 我还尝试按照以下说明安装 http-proxy-middleware:https : //create-react-app.dev/docs/proxying-api-requests-in-development/

这是用于react的包 json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }, 
  "proxy": "http://localhost:4001"
}

react 的 localhost 页面是空白的,而不是有文本。控制台日志还确认未收到任何数据。

2个回答

经过无数次的搜索,我找到了问题所在并让它工作了!!!

首先,由于在 react 上运行 npm 命令时出现代理错误,我认为 package.json 中的代理语句正在运行。由于我也可以通过 localhost:4001 访问服务器,所以问题一定是react服务器以某种方式找不到 node.js 服务器,即不在同一通信通道中等。

然后我搜索并发现问题与它们没有同时运行有关(我还考虑了其​​他可能性,例如一个在 ipv4 上运行与另一个在 ipv6 上运行,但这似乎是最有可能的解决方案)。这个答案帮助我弄清楚如何实现它:Could not proxy request /pusher/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)

但是并发请求会失败,因为当它尝试运行客户端时,它会失败,因为端口总是被阻塞。例如,当我运行“npm start --prefix client”时,即使我更改了 package.json 中的端口,它也会始终报告“在端口 XXX 上运行的东西”。然后我发现问题必须没有为我的本地主机设置正确的配置,这个答案帮助了我:npm start 报告“Something is already running on port XXX”不管 XXX 是什么

现在与并发,它终于可以工作了。

尝试在 package.json 的代理配置中添加 "secure":false。

包.json

... "proxy": { "/api": { "target": " https://localhost:5002 ", "secure": false } }, ...

参考链接:https : //github.com/facebook/create-react-app/issues/3823