react代理错误：无法将请求 /api/ 从 localhost:3000 代理到 http://localhost:8000 (ECONNREFUSED)

IT技术 node.js django reactjs axios
2021-04-03 13:44:59

我有一个 React 前端，它使用 jwt 与 Django 后端进行身份验证。后端工作并且使用 django 视图连接得很好，但是当我尝试代理来自 React 的请求时，它给了我一个连接拒绝错误。

代理错误：无法将请求 /api/auth/token/obtain/ 从 localhost:3000 代理到http://localhost:8000 (ECONNREFUSED)。

连接到http://localhost:8000/api/auth/token/obtain/工作正常。并且用axios发送POST请求也正常，返回token json。但是当我用节点代理它时，它不起作用。

在我的package.json我有：

  "proxy": {
    "/api/*":  {
      "target": "http://localhost:8000"
    }
  },

编辑： 公共回购。如果安装了 docker，则可以轻松运行。（使用 1 个图像和 2 个容器）。克隆后直接运行docker-compose build，然后docker-compose up。

编辑2：请求标题：

*General*
Request URL: http://localhost:3000/api/auth/token/obtain/
Request Method: POST
Status Code: 500 Internal Server Error
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade

*Response Headers*
HTTP/1.1 500 Internal Server Error
X-Powered-By: Express
Date: Mon, 30 Apr 2018 21:23:17 GMT
Connection: keep-alive
Transfer-Encoding: chunked

*Request Headers
POST /api/auth/token/obtain/ HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 45
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Content-Type: application/json
Accept: */*
Referer: http://localhost:3000/login
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr;q=0.8,ja;q=0.7
6个回答

所以问题是因为 Node 开发环境和 Django 开发环境都在单独的 docker 容器中运行，所以localhost指的是节点容器，而不是桥接网络。

所以关键是使用容器链接，在使用时自动创建docker-compose，并将其用作主机名。所以我把它改成

"proxy": {
    "/api":  {
        "target": "http://django:8000"
    }
},

只要您使用相同的docker-compose命令启动两个容器，就行了，否则您必须在docker-compose.yml文件中手动指定 external_links 。

我遇到了同样的问题，对我来说，当 package.json 中的代理是一个对象时出现错误，因此它必须是一个字符串，但http://<container-name>:<port>效果很好！非常感谢
2021-06-08 13:44:59

我也遇到了同样的问题。大多数搜索结果都提到添加"secure": false或添加"ignorePath": true到您的代理配置。像这样的东西：

"proxy": {
    "/api/*":  {
      "target": "http://localhost:8000",
      "secure": false
    }
  },

可能值得一试，但不幸的是，这些都不适合我。尽管每个地址（http://localhost:3000和http://localhost:8000）在浏览器中都可以正常工作，但也许由于容器实际上是代理它需要使用 Docker 地址？

编辑 -

好吧，我想我想通了。我相信它确实与容器到容器的通信有关。查看您的docker-compose，您的 api 服务器被称为django。将您的 package.json 文件更改为：

"proxy": {
    "/api/*":  {
      "target": "http://django:8000",
      "secure": false
    }
  }
我昨天实际上解决了这个问题，并发布了我如何解决它的答案。对我来说，这是因为两台服务器运行在不同的节点容器上，所以localhost, 没有指代与 django 相同的主机。
2021-05-28 13:44:59
这个答案极大地帮助了我解决今天的问题，所以感谢一百万@VincentJr
2021-05-31 13:44:59

我遇到了类似的问题，但在 Mac 机器上。我在package.json 中更改localhost为对我有用，如下所示：127.0.0.1

"proxy": "http://127.0.0.1:5000"
试过这个并不起作用。React 仍在尝试向 localhost:3000 发送请求
2021-06-15 13:44:59

如果您使用的是较新版本的 CRA 2.0+，则需要通过手动代理执行此操作。 https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

如果您不想设置 docker compose，也可以使用docker 网络：

创建网络并在该网络中运行 docker 容器

docker network create webapp_network

docker run -d -p 5000:5000 --name webapp_backend --network webapp_network webapp_backend_image

docker run -d -p 3000:3000 --name webapp_frontend --network webapp_network webapp_frontend_image

在我的前端 React webapp 的 package.json 中添加了一行：

"proxy": "http://webapp_backend:5000"

请注意，您现在可以使用容器名称而不是 localhost 来引用后端

其它你可能感兴趣的问题
上一篇Promise 错误：对象作为 React 子对象无效 下一篇React props：我应该传递对象还是它的属性？它有很大的不同吗？