create-react-app腳手架 - 跨域、反向代理

在做前後端分離的項目的時候，調用接口我們都會遇到跨域的問題。解決跨域問題可以後臺設置cros(跨域資源共享)，如果前端解決的話可以使用代理，接下來一起來看一下create-react-app腳手架下如果配置

一、只代理一個

在package.json文件中增加如下配置：

 

"proxy": "http://www.wyunfei.com"  // 配置你要請求的服務器地址

結果，如下

 

王雲飛親測成功.png

注意，鼠標懸浮請求地址還是沒有變化，但是其實已經幫我們代理到來了http://www.wyunfei.com/這個地址上了，否則我的請求絕對會404，因爲在我這裏根本就沒有這個API啊。

二、代理多個

在package.json文件中繼續增加如下配置：

 

"proxy":{
    "/manage": {
      "target": "http://admintest.happymmall.com",
      "changeOrigin": true
    },
    "/user/logout.do": {
      "target": "http://admintest.happymmall.com",
      "changeOrigin": true
    }
  },

結果，如下

image.png

報錯了，啥意思？
提示只支持string類型,不支持object
create-react-app 的版本在低於 2.0 的時候可以在 package.json 增加 proxy 配置， 配置成如下：

 

 

"proxy":{
   "/manage":{
      "target":"http://admintest.happymmall.com",
      "changeOrigin": true
    }
  }

create-react-app 的版本高於 2.0 版本的時候在 package.json 只能配置 string 類型， 配置成如下：

 

"proxy": "http://www.wyunfei.com"  // 配置你要請求的服務器地址

解決方案

安裝http-proxy-middleware

 

npm i http-proxy-middleware

在src/下新建setupProxy.js

 

/**
 @Author：Wyunfei
 @Date：2019/3/26/16:14
 @FileName: setupProxy.js
 */
const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy("/manage", {
        target: "http://admintest.happymmall.com" , //配置你要請求的服務器地址
        changeOrigin: true,
    }))
    app.use(proxy("/manage/api", {
        target: "http://admintest.happymmall.com:7000" ,
        changeOrigin: true,
    }))
};

結果，測試成功！！！

 

王雲飛親測 - 成功

注意，在config/paths.js裏面修改setupProxy.js的引用路徑

三、配置中主要的參數說明

'/api'

捕獲API的標誌，如果API中有這個字符串，那麼就開始匹配代理，
比如API請求/api/users, 會被代理到請求 http://www.baidu.com/api/users 。

target

代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要額外添加一個參數changeOrigin: true，否則會代理失敗。

pathRewrite

路徑重寫，也就是說會修改最終請求的API路徑。
比如訪問的API路徑：/api/users,
設置pathRewrite: {'^/api' : ''},後，
最終代理訪問的路徑：http://www.baidu.com/users，
這個參數的目的是給代理命名後，在訪問時把命名刪除掉。

changeOrigin

這個參數可以讓target參數是域名。

secure

secure: false,不檢查安全問題。
設置後，可以接受運行在 HTTPS 上，可以使用無效證書的後端服務器

其他參數配置查看http-proxy-middleware文檔

作者：王雲飛_小四_wyunfei
鏈接：https://www.jianshu.com/p/58a12bc4a1de
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。