快捷導(dǎo)航

react setupProxy.js導(dǎo)致項(xiàng)目無法啟動(dòng)的解決

更新時(shí)間：2024年07月11日 15:45:56 作者：苦夏木禾

這篇文章主要介紹了react setupProxy.js導(dǎo)致項(xiàng)目無法啟動(dòng)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

react setupProxy.js導(dǎo)致項(xiàng)目無法啟動(dòng)

如果是因?yàn)樘砑恿藄etupProxy.js導(dǎo)致項(xiàng)目無法啟動(dòng)，檢查此文件中的如下內(nèi)容：

低版本 http-proxy-middleware

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react腳手架已經(jīng)安裝

module.exports = function(app){
	app.use(
		proxy('/api',{ //遇見/api1前綴的請(qǐng)求，就會(huì)觸發(fā)該代理配置
			target:'http://localhost:5000', //請(qǐng)求轉(zhuǎn)發(fā)給誰
			changeOrigin:true,//控制服務(wù)器收到的請(qǐng)求頭中Host的值
			pathRewrite:{'^/api':''} //重寫請(qǐng)求路徑，下面有示例解釋
		}),
		proxy('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

高版本 http-proxy-middleware

const proxy = require('http-proxy-middleware')//引入http-proxy-middleware，react腳手架已經(jīng)安裝

module.exports = function(app){
	app.use(
		proxy.createProxyMiddleware('/api',{ //遇見/api1前綴的請(qǐng)求，就會(huì)觸發(fā)該代理配置
			target:'http://localhost:5000', //請(qǐng)求轉(zhuǎn)發(fā)給誰
			changeOrigin:true,//控制服務(wù)器收到的請(qǐng)求頭中Host的值
			pathRewrite:{'^/api':''} //重寫請(qǐng)求路徑，下面有示例解釋
		}),
		proxy.createProxyMiddleware('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

版本如果是2以上就算是高版本，尤其是最新的項(xiàng)目

配置setupProxy.js代理，頁面報(bào)錯(cuò)404問題

遇到了一個(gè)問題，就是更換解決跨域問題方式時(shí)，配置setupProxy.js代理后，可以正常啟動(dòng)，但是報(bào)404訪問不到頁面。

原因是：

// setupProxy.js
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api/**', {  //`api`是需要轉(zhuǎn)發(fā)的請(qǐng)求 
      target: 'http://127.0.0.1:8083',  // 這里是接口服務(wù)器地址
      changeOrigin: true,
    })
  )
}

更改為

// setupProxy.js
const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/api/**', {  //`api`是需要轉(zhuǎn)發(fā)的請(qǐng)求 
      target: 'http://127.0.0.1:8083',  // 這里是接口服務(wù)器地址
      changeOrigin: true,
    })
  )
}

即可~~~~