[英]"React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:5000 (ECONNREFUSED)'? Error.. No solution online
[英]React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)
我有一個 React 前端,它使用 jwt 與 Django 后端進行身份驗證。 后端正常工作並且使用 django 視圖連接得很好,但是當我嘗試代理來自 React 的請求時,它給了我一個連接被拒絕的錯誤。
代理錯誤:無法代理請求 /api/auth/token/obtain/ 從 localhost:3000 到http://localhost:8000 (ECONNREFUSED)。
連接到http://localhost:8000/api/auth/token/obtain/正常。 並且使用 Axios 發送 POST 請求也正常工作並返回令牌 json。但是當我用節點代理它時,它不起作用。
在我的package.json
我有:
"proxy": {
"/api/*": {
"target": "http://localhost:8000"
}
},
編輯: 公共回購。 如果你安裝了 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 開發環境和 Django 開發環境都在單獨的 docker 容器中運行,所以localhost
指的是節點容器,而不是橋接網絡。
所以關鍵是使用容器鏈接,在使用docker-compose
時自動創建,並將其用作主機名。 所以我把它改成
"proxy": {
"/api": {
"target": "http://django:8000"
}
},
只要您使用相同的docker-compose
命令啟動兩個容器,就行了,否則您必須在docker-compose.yml
文件中手動指定 external_links。
我也遇到了同樣的問題。 大多數搜索結果都提到在您的代理配置中添加"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
}
}
我遇到了類似的問題,但在 Mac 機器上。 我在package.json中將localhost
更改為127.0.0.1
,這對我有用,如下所示:
"proxy": "http://127.0.0.1:5000"
實際上並沒有在這里得到我正在尋找的答案,但有一個替代解決方案對我有用。 我認為它與 Node v17 特別相關,因為那時它開始發生在我身上,但解決方案非常簡單。
我更新了:
"proxy": "http://localhost:8000"
至:
"proxy": "http://127.0.0.1:8000"
如果它是相關的(我不認為它是相關的) - 我正在代理到 Django 服務器。
如果您使用的是較新版本的 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 來引用后端
昨天將Docker
升級到版本v19.03.13
(在Mac
)后可以看到錯誤,重新啟動Docker
修復了該問題。 該應用程序還運行Node.js
/ React
,但不運行Django
。 基本上,我在連接到MongoDB Atlas
遇到了與身份驗證/從雲數據庫中獲取任何內容相關的問題。
正確的答案是使用手動代理
django:4000
localhost:8000
因為如果 Django 使用返回絕對 url 的reverse
函數
reverse('preview-mail', args=[mail.pk],request=request)
你需要有正確的 HOST 標頭,否則你可能會得到像https://django:4000/your-url這樣的結果 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')
}
})
)
}
選擇 localhost 的確切值來填充“目標”屬性主要是解決方案(它可以是 localhost, 127.0.0.1, [::1] )。
mac 用戶應在終端中輸入以獲取解決方案:
sudo lsof -iTCP -sTCP:LISTEN -n -P
如果您正在使用 MERN 堆棧應用程序,請確保您不在客戶端文件夾中。 你需要在根中。 在 root 中,在終端中運行此命令。 npm 運行開始:dev
就我而言,我的服務器在端口3001上運行,但我的 React 前端項目的 package.json 文件中有"proxy": "http://localhost:3000"
對於NodeJs后端可以通過在后端的package.json文件中添加一行代碼來解決
"devstart": "nodemon server.js --ignore './location of frontend react directory'",
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.