快捷導(dǎo)航

React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404問題

更新時(shí)間：2024年07月12日 09:30:53 作者：pg_li

這篇文章主要介紹了React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

React ts模式使用http-proxy-middleware代理時(shí)訪問報(bào)404

create-react-app腳手架創(chuàng)建Recat應(yīng)用，選擇的是TypeScript

根據(jù)http-proxy-middleware文檔在src目錄創(chuàng)建setupProxy.js，一直報(bào)錯(cuò)

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項(xiàng)目啟動(dòng)，頁面顯示“無法訪問網(wǎng)站”，原因之一是代理腳本（setupProxy.js）的語法與版本對(duì)應(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ù)器收到的請(qǐng)求頭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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React?狀態(tài)管理中的Jotai詳解
Jotai是一個(gè)簡(jiǎn)單、靈活、高效的React狀態(tài)管理庫,通過原子和派生狀態(tài)的設(shè)計(jì),使得狀態(tài)管理變得直觀和高效,它適用于小型應(yīng)用、組件庫和大型項(xiàng)目的局部狀態(tài)管理,且與TypeScript兼容,Jotai的社區(qū)正在壯大,提供了豐富的資源和支持,感興趣的朋友跟隨小編一起看看吧
2024-11-11
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本)
散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸),接下來通過本文大家分享D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ，一起看看
2019-05-05
在React項(xiàng)目中使用TypeScript詳情
這篇文章主要介紹了在React項(xiàng)目中使用TypeScript詳情，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
React?Suspense解決競(jìng)態(tài)條件詳解
這篇文章主要為大家介紹了React?Suspense解決競(jìng)態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
Remix 后臺(tái)桌面開發(fā)electron-remix-antd-admin
這篇文章主要為大家介紹了Remix 后臺(tái)桌面開發(fā)electron-remix-antd-admin的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
在React中集成第三方庫和插件方式
本文詳細(xì)介紹了如何在React項(xiàng)目中高效集成第三方庫和插件,包括選擇合適的庫、封裝為React組件、按需加載、避免直接操作DOM、處理庫的更新和卸載、樣式處理與主題定制、性能優(yōu)化以及調(diào)試與維護(hù)等方面,通過遵循這些最佳實(shí)踐,可以確保集成過程高效且優(yōu)雅
2025-03-03
React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會(huì)，簡(jiǎn)單模擬實(shí)現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級(jí)的思路進(jìn)行項(xiàng)目?jī)?yōu)化的兩個(gè)hooks，感興趣的小伙伴跟著小編一起來看看吧
2023-07-07
簡(jiǎn)單分析React中的EffectList
這篇文章主要簡(jiǎn)單分析了React中的EffectList，幫助大家更好的理解和學(xué)習(xí)使用React進(jìn)行前端開發(fā)，感興趣的朋友可以了解下
2021-04-04
React組件的解耦技巧分享
本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復(fù)用性極高,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-11-11
React Hook 父子組件相互調(diào)用函數(shù)方式
這篇文章主要介紹了React Hook 父子組件相互調(diào)用函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09