快捷導(dǎo)航

關(guān)于react的代理配置(可配置多個(gè)代理)

更新時(shí)間：2022年12月06日 10:04:59 作者：牛先森家的牛奶

這篇文章主要介紹了關(guān)于react的代理配置(可配置多個(gè)代理)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react的代理配置

第一種寫(xiě)在package.json中（不推薦）

代碼中使用3000的端口訪問(wèn)，例如如下：

// 創(chuàng)建并暴露App
export default class App extends Component{
  getData = () => {
    axios.get('http://localhost:3000/api/info').then(
      response => {console.log('成功', response.data);},
      error => {console.log('失敗',error);}
    )
  }
  render(){
    return (
      <div>
        <Hello></Hello>
        <Welcome></Welcome>
        <button onClick={this.getData}>點(diǎn)我請(qǐng)求數(shù)據(jù)</button>
      </div>
    )
  }
}

優(yōu)點(diǎn)：配置簡(jiǎn)單，前端請(qǐng)求資源時(shí)可以不加任何前綴。
缺點(diǎn)：不能配置多個(gè)代理。
工作方式：上述方式配置代理，當(dāng)請(qǐng)求了3000不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給5000 （優(yōu)先匹配前端資源）

第二種建立 setupProxy.js，注意必須是這個(gè)文件名

在src同級(jí)目錄創(chuàng)建setupProxy.js;

注意：這個(gè)文件里面需要用commonjs寫(xiě)法，不能使用ES6用法，react會(huì)找到這個(gè)文件并把它添加到webpack配置中；

setupProxy.js文件中代碼如下：

const proxy = require('http-proxy-middleware')module.export = function(app){
  app.use(
    // 代理api 下面再把 /api 替換為空字符串 因?yàn)槁窂嚼锩鏇](méi)有 /api
    proxy('/api1', {  // 遇見(jiàn) /api1 前綴的請(qǐng)求 就會(huì)觸發(fā)該代理配置
      target: 'http://localhost:5000', // 請(qǐng)求轉(zhuǎn)發(fā)給誰(shuí)
      changeOrigin: true, // 控制服務(wù)器接收到的請(qǐng)求頭Host的值 
      // 重新請(qǐng)求路徑 把 /api1 替換為空字符串 必須加
      pathRewrite:{'^/api1' : ''} 
    }),
    proxy('/api2', { // 遇見(jiàn) /api2前綴的請(qǐng)求 就會(huì)觸發(fā)該代理配置
      target: 'http://localhost:5001',
      changeOrigin: true,
      // 把a(bǔ)pi 替換為空字符串
      pathRewrite:{'^/api2' : ''}
    }),
  )
}

項(xiàng)目頁(yè)面中調(diào)接口使用：

// 創(chuàng)建并暴露App
export default class App extends Component{
  getDataOne = () => {
    axios.get('http://localhost:3000/api1/info').then(
      response => {console.log('成功', response.data);},
      error => {console.log('失敗',error);}
    )
  }
  getDataTwo = () => {
    axios.get('http://localhost:3000/api2/car').then(
      response => {console.log('成功', response.data);},
      error => {console.log('失敗',error);}
    )
  }
  render(){
    return (
      <div>
        <Hello></Hello>
        <Welcome></Welcome>
        <button onClick={this.getDataOne}>點(diǎn)我請(qǐng)求數(shù)據(jù)1</button>
        <button onClick={this.getDataTwo}>點(diǎn)我請(qǐng)求數(shù)據(jù)2</button>
      </div>
    )
  }
}

優(yōu)點(diǎn)：可以配置多個(gè)代理，可以靈活的控制請(qǐng)求是否走代理。

缺點(diǎn)：配置繁瑣，前端請(qǐng)求資源時(shí)必須加前綴。