web-dev-qa-db-ja.com

Reactプロキシエラー：localhost：3000からhttp：// localhost：8000（ECONNREFUSED）への/ api /リクエストをプロキシできませんでした

Jwtを使用してReactバックエンドで認証するDjangoフロントエンドがあります。バックエンドは機能し、Djangoビューを使用して正常に接続していますが、Reactからリクエストをプロキシしようとすると、接続拒否エラーが発生します。

プロキシエラー：localhost：3000から http：// localhost：8000 （ECONNREFUSED）へのリクエスト/ api/auth/token/obtain /をプロキシできませんでした。

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
node.jsdjangoreactjsaxios
12
cclloyd

したがって、問題はNode dev環境とDjango dev環境が別々のdockerコンテナで実行されていたため、localhostはブリッジネットワークではなく、ノードコンテナ。

そのため、キーはdocker-composeを使用するときに自動的に作成されるコンテナリンクを使用し、それをホスト名として使用することでした。だから私はそれを

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

そして、同じdocker-composeコマンドで両方のコンテナーを起動する限り、それは機能しました。そうでなければ、docker-compose.ymlファイルでexternal_linksを手動で指定する必要があります。

10
cclloyd

私も同じ問題に直面しています。ほとんどの検索結果には、"secure": false または "ignorePath": trueプロキシ設定に。このようなもの：

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

試してみる価値はあるかもしれませんが、残念ながらこれは私にとってはうまくいきませんでした。各アドレス（ http：// localhost：30 および http：// localhost：80 ）はブラウザで完全に機能しますが、コンテナが実際にプロキシしているためかDockerアドレスを使用するには？

編集-

わかった。コンテナ間の通信に関係していると思います。 docker-compose、APIサーバーはDjangoと呼ばれます。 package.jsonファイルを次のように変更します。

"proxy": {
    "/api/*":  {
      "target": "http://Django:8000",
      "secure": false
    }
  }
5
VincentJr

新しいバージョンのCRA 2.0以降を使用している場合は、手動プロキシ経由でこれを行う必要があります。 https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

0
ralphinator80