Question

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

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

我尝试了以下方法来解决此问题：

我已验证服务器运行正常，并且localhost：4001确实提供了数据。
我检查了浏览器开发工具，发现错误是GET http://localhost:51427/flower 500（内部服务器错误）
我还在服务器的package.json中添加了“ --ignore client”
我还尝试按照以下说明安装http-proxy-middleware：https://create-react-app.dev/docs/proxying-api-requests-in-development/。

以下是用于响应的包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的本地主机页面为空白，而不是文本。控制台日志还确认没有收到数据。

Answer 1

经过无数次搜索，我发现了问题并使其正常工作！！！

首先，由于在我对React运行npm命令时出现了代理错误，因此我发现package.json中的proxy语句正在工作。由于我也可以通过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 reports "Something is already running on port XXX" no matter what XXX is。

现在同时运行，它终于可以工作了。

Answer 2

尝试在package.json的代理配置中添加“安全”：false。

package.json

... “代理”： { “ / api”：{ “ target”：“ https://localhost:5002”， “安全”：错误 } }， ...

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

添加代理以响应package.json

2 个答案: