[英]create-react-app/express Proxy error: Could not proxy request (ECONNRESET)
[英]Create-React-App Proxy error
我正在創建一個 create-react-app。
我正在使用現有的 API(它是用 MVC C# web api 編寫的)。
我希望 React 應用程序使用的 API 位於: https : //api.myserver.com.au
我正在從http://localhost運行 React 的開發版本
當我上線時,我將始終從與 API 不同的位置托管我的 React 應用程序。 即我將在https://my.cool.app 上托管它,而 API 仍將在https://api.myserver.com.au
我的 package.json 如下:
{
"name": "hbi.contractor",
"version": "0.1.0",
"private": true,
"proxy": {
"/api/*": {
"target": "https://api.myserver.com.au"
}
},
"dependencies": {
"axios": "^0.17.1",
"jquery": "^3.2.1",
"materialize-css": "^0.100.2",
"nodemon": "^1.14.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-form": "^2.16.1",
"react-live-clock": "^2.0.2",
"react-load-script": "0.0.6",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-materialize": "^1.1.2"
}
}
當我將代理設置為開發 MVC C# 本地主機服務器時,它工作正常,但是在實時 API 服務器和開發 React 上時,我嘗試瀏覽到:
http://localhost:3000/api/Acccount/GetUser
響應是:
Proxy error: Could not proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au (ECONNRESET).
在終端中,它與此消息非常相似:
Proxy error: Could not proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
[HPM] Error occurred while trying to proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors
)
有沒有一種方法可以逐步調試節點(我假設是表示)服務器,以便我可以獲得有關此錯誤的更多詳細信息?
我打開了 fiddler,看起來沒有任何訪問遠程代理服務器的嘗試。
考慮到我計划在實時版本中保持這種方式,代理功能是否是正確的功能?
任何幫助將不勝感激。
我已經通過更新我的 package.json 文件解決了這個問題:
"proxy": {
"/api/*": {
"target": "https://api.hbiaustralia.com.au",
"changeOrigin": true
}
},
但我想知道在我的 Live 網站上使用“代理”有用嗎? 或者它是一種開發工具,應該以不同的方式創建實時站點?
我認為在此期間問題已解決。
是的,代理是一個開發工具,你的反應部分通常應該是靜態內容。 請參閱代理服務器文檔:
請記住,代理僅在開發中有效(使用 npm start),並且由您來確保 /api/todos 之類的 URL 指向生產中的正確內容。
在您的情況下,api 有一個不同的主機。 這應該通過合適的環境設置來解決。 (負載均衡器,代理或其他)然后您可以保留相對路徑。
否則,必須為每個 env 變量或配置部署配置 host:port 部分,並重寫為 React App 中的絕對路徑。 看這里
您正在從本地主機向其他域發出 ajax 請求。 這算作 CORS 請求。 要避免這種情況,您需要使用代理。 由於代理是 create react 應用程序的一部分,您的瀏覽器假定它始終指向 create-react-app,瀏覽器不知道代理在那里。 要解決此問題,請按照以下步驟操作:
在客戶端目錄中:
npm i http-proxy-middleware --save
在 client/src 中創建 setupProxy.js 文件。 無需在任何地方導入它。 create-react-app 會尋找這個目錄
將您的代理添加到此文件。
const proxy=require("http-proxy-middleware")
module.exports=function(app){
app.use(proxy(['/api'],{target:"http://localhost:8888"}))}
我們是說創建一個代理,如果有人試圖訪問我們的反應服務器上的路由 /api,自動將請求轉發到 localhost:8888。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.