快捷導航

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)文章

詳解使用React進行組件庫開發(fā)
本篇文章主要介紹了詳解使用React進行組件庫開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
深入理解React合成事件
React的合成事件是一個跨瀏覽器統(tǒng)一的事件系統(tǒng),它基于原生DOM事件構(gòu)建,通過封裝不同瀏覽器的事件實現(xiàn)差異,為開發(fā)者提供一致的事件處理接口,具有一定的參考價值,感興趣的可以了解一下
2026-01-01
如何強制刷新react hooks組件
這篇文章主要介紹了如何強制刷新react hooks組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
React中使用useState時狀態(tài)更新不生效的原因及解決方法
在使用 React 的 useState 鉤子時,有時我們會遇到通過 set 方法更新狀態(tài)后界面沒有相應(yīng)變化的情況,這可能是由于一些常見的問題導致的,本文將詳細分析這些可能的原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下
2025-12-12
React?useEffect不支持async?function示例分析
這篇文章主要為大家介紹了React?useEffect不支持async?function示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
React父子組件間的傳值的方法
在單頁面里面，父子組件傳值是比較常見的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
React?Native集成支付寶支付的實現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下
2022-02-02
React DOM-diff 節(jié)點源碼解析
這篇文章主要為大家介紹了React DOM-diff節(jié)點源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
基于react框架使用的一些細節(jié)要點的思考
下面小編就為大家?guī)硪黄趓eact框架使用的一些細節(jié)要點的思考。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
React Hooks與setInterval的踩坑問題小結(jié)
本文主要介紹了React Hooks與setInterval的踩坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04