020.React配置代理

1. React自己只關注界面，並不包含發送ajax請求的代碼
2. 前端應用須要經過ajax請求與後臺進行交互（json數據）
3. react應用須要集成第三方ajax庫或本身封裝庫

經常使用的ajax庫：

1. jQuery：比較重不建議使用
2. axios：輕量級 建議
   • 封裝xmlHttpRequest對象的ajax
   • promise風格
   • 能夠用在瀏覽器端和node服務器端

配置代理服務器

方法一

在package.json中追加以下配置

"proxy":"http://localhost:5000"
複製代碼

說明：

0. 優勢：配置簡單，前端請求資源時能夠不加任何前綴。
1. 缺點：不能配置多個代理。
2. 工做方式：上述方式配置代理，當請求了3000不存在的資源時，那麼該請求會轉發給5000 （優先匹配前端資源）

方法二

0. 第一步：建立代理配置文件

   在src下建立配置文件：src/setupProxy.js
   複製代碼

1. 編寫setupProxy.js配置具體代理規則：

   const proxy = require('http-proxy-middleware')
   
   module.exports = function(app) {
     app.use(
       proxy('/api1', {  //api1是須要轉發的請求(全部帶有/api1前綴的請求都會轉發給5000)
         target: 'http://localhost:5000', //配置轉發目標地址(能返回數據的服務器地址)
         changeOrigin: true, //控制服務器接收到的請求頭中host字段的值
         /*     changeOrigin設置爲true時，服務器收到的請求頭中的host爲：localhost:5000     changeOrigin設置爲false時，服務器收到的請求頭中的host爲：localhost:3000     changeOrigin默認值爲false，但咱們通常將changeOrigin值設爲true     */
         pathRewrite: {'^/api1': ''} //去除請求前綴，保證交給後臺服務器的是正常請求地址(必須配置)
       }),
       proxy('/api2', { 
         target: 'http://localhost:5001',
         changeOrigin: true,
         pathRewrite: {'^/api2': ''}
       })
     )
   }
   複製代碼

說明：

0. 優勢：能夠配置多個代理，能夠靈活的控制請求是否走代理。
1. 缺點：配置繁瑣，前端請求資源時必須加前綴。