React通過代理解決跨域問題

假設：前端端口為300，node后台端口為5000；前端發送請求，后台實際上接收到了前端請求，但是因為端口不同導致前端接收不到數據，出現跨域問題，

出現跨域問題的原因：一般是瀏覽器的ajax引擎將回來的請求給攔住了；

代理：就是一個微型的服務器（也就是代理服務器，端口也開在3000），她沒有ajax引擎，就可以接收到后台5000端口返回的數據，然后返回給瀏覽器

 

如下圖：前端端口為300，node后台端口為5000，請求頁面報錯

 

 

為解決以上問題，

第一種代理方式：(適用於只有一個后台服務器)

 在package.json中寫下：

"proxy":"后台要跨域的地址"

 記得一定要重新啟動前端，然后再次請求一下數據就可以看到沒有跨域問題

但是這種代理解決跨域的方法，它首先是在3000端口的public文件夾下找有沒有這個資源，沒有才會再通過配置的proxy中5000端口去找；

例如：我在前端發送請求：將上面請求的student改為index.html，如下圖所示：

  執行結果：通過下面的執行結果可以看出也是執行成功的狀態，返回的就是我的public文件夾下的index頁面

第二種代理方式：(適用於一個或者多個后台服務器)

 在src下創建一個文件夾setupProxy.js ，這個文件用cjs寫不能用es6,react腳手架會自動找到這個文件，並把這個文件的加到webpack的配置里面（webpack里面的語法都是用的node,也就是cjs）

src/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': ''}
    })
  )
}

在頁面中請求：

 

 請求結果：