React ts模式使用http-proxy-middleware代理時訪問報404問題
更新時間：2024年07月12日 09:30:53 作者：pg_li
這篇文章主要介紹了React ts模式使用http-proxy-middleware代理時訪問報404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
React ts模式使用http-proxy-middleware代理時訪問報404
create-react-app腳手架創(chuàng)建Recat應(yīng)用，選擇的是TypeScript
根據(jù)http-proxy-middleware文檔 在src目錄創(chuàng)建setupProxy.js，一直報錯
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
createProxyMiddleware('/custom', {
target: 'http://127.0.0.1:7001',
changeOrigin: true, // needed for virtual hosted sites
ws: true, // proxy websockets
pathRewrite: {
'^/custom': ''
}
})
)
};解決方式
將setupProxy.js復(fù)制一份后綴改成ts可正常訪問（setupProxy.ts setupProxy.js）
http-proxy-middleware的坑
react項目啟動，頁面顯示“無法訪問網(wǎng)站”，原因之一是代理腳本（setupProxy.js）的語法與版本對應(yīng)不上。
解決方法：
舊版本寫法
在src下新建setupProxy.js；
const proxy = require("http-proxy-middleware")
module.exprots = function (app) {
app.use(
proxy('/api1', {
target: 'http://localhost:5000',
changeOrigin: true, // 控制服務(wù)器收到的請求頭host字段的值
pathRewrite: { '^/api1': '' } // 路徑重寫
})
)
}
新版本寫法
在src下新建setupProxy.js；
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use('/api', createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
}
}))
}
注意?。。。。?！
兩種寫法的前綴位置是不一樣的，舊版本是作為proxy的參數(shù)，新版本是app.use的參數(shù)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Jotai是一個簡單、靈活、高效的React狀態(tài)管理庫,通過原子和派生狀態(tài)的設(shè)計,使得狀態(tài)管理變得直觀和高效,它適用于小型應(yīng)用、組件庫和大型項目的局部狀態(tài)管理,且與TypeScript兼容,Jotai的社區(qū)正在壯大,提供了豐富的資源和支持,感興趣的朋友跟隨小編一起看看吧2024-11-11
D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的散點圖 (V3版本)
散點圖(Scatter Chart),通常是一橫一豎兩個坐標軸，數(shù)據(jù)是一組二維坐標，分別對應(yīng)兩個坐標軸，與坐標軸對應(yīng)的地方打上點。由此可以猜到，需要的元素包括circle(圓)和axis(坐標軸),接下來通過本文大家分享D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的散點圖 (V3版本) ，一起看看2019-05-05
這篇文章主要介紹了在React項目中使用TypeScript詳情，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Remix 后臺桌面開發(fā)electron-remix-antd-admin
這篇文章主要為大家介紹了Remix 后臺桌面開發(fā)electron-remix-antd-admin的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
本文詳細介紹了如何在React項目中高效集成第三方庫和插件,包括選擇合適的庫、封裝為React組件、按需加載、避免直接操作DOM、處理庫的更新和卸載、樣式處理與主題定制、性能優(yōu)化以及調(diào)試與維護等方面,通過遵循這些最佳實踐,可以確保集成過程高效且優(yōu)雅2025-03-03
這篇文章主要介紹了react中的渲染機制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機制以及產(chǎn)生作用的機會，簡單模擬實現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級的思路進行項目優(yōu)化的兩個hooks，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
這篇文章主要簡單分析了React中的EffectList，幫助大家更好的理解和學(xué)習(xí)使用React進行前端開發(fā)，感興趣的朋友可以了解下2021-04-04
本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復(fù)用性極高,文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
React Hook 父子組件相互調(diào)用函數(shù)方式
這篇文章主要介紹了React Hook 父子組件相互調(diào)用函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09