Question

我有一个使用jwt来验证Django后端的React前端。后端工作，并使用django视图连接正常，但当我尝试从React代理请求时，它给我一个连接拒绝错误。

代理错误：无法代理请求/ api / auth / token /获取/从localhost：3000到http://localhost:8000（ECONNREFUSED）。

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

在package.json我有：

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

修改：Public repo。如果安装了docker，则可以轻松运行。（使用1个图像和2个容器）。克隆后，只需运行docker-compose build，然后docker-compose up。

Edit2：请求标题：

*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

Answer 1

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

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

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

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

Answer 2

我也遇到了同样的问题。大多数搜索结果都提到将"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 } }

Answer 3

如果您不想设置 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 来引用后端

Answer 4

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

Answer 5

正确答案将与

一起使用手动代理

target =码头工人地址django:4000
正确的HOST标头localhost:8000

因为Django是否使用reverse函数返回绝对网址

reverse('preview-mail', args=[mail.pk],request=request)

您需要具有正确的HOST标头，否则您可能会得到如下结果URL https://django:4000/your-url`

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://django:4000',
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/api': ''
      },
      onProxyReq: function (proxyReq, req, res) {
          proxyReq.setHeader("host", 'localhost:8000')
      }
    })
  )
}

Answer 6

我在Mac计算机中遇到了类似的问题。我在 package.json 中将localhost更改为127.0.0.1，对我来说如下所示：

"proxy": "http://127.0.0.1:5000"

Answer 7

昨天（Docker升级到v19.03.13版本（Mac），重新启动Docker后，可以看到错误。该应用程序还运行Node.js / React，但不运行Django。基本上，我与MongoDB Atlas的连接存在问题，与身份验证/从云数据库中获取任何内容有关。

Answer 8

为 localhost 选择精确值来填充“目标”属性是主要的解决方案（它可以是 localhost, 127.0.0.1, [::1] ）。

Mac 用户应在终端中输入以获取解决方案：

sudo lsof -iTCP -sTCP:LISTEN -n -P

Answer 9

如果您正在开发 MERN 堆栈应用，请确保您不在客户端文件夹中。你需要在根中。在 root 中，在终端中运行此命令。 npm run start:dev

React Proxy错误：无法将请求/ api /从localhost：3000代理到http：// localhost：8000（ECONNREFUSED）

9 个答案: