react使用http-proxy-middleware跨域請求

一、http-proxy-middleware使用方法

在src目錄下建立setupProxy.js文件

const proxy = require("http-proxy-middleware");

// app能夠理解爲一個express實例
module.exports = function (app) {
  app.use(
    proxy(['/mock/1241', '/mock/1105'], {
      target: "http://10.118.71.83:3000/", // 目標服務器
      changeOrigin: true // 默認false，是否須要改變原始主機頭爲目標URL，是否進行代理
    }),
  );
}

http-proxy-middleware會做爲target的反向代理服務器，接受http://localhost:3000/mock/1241/xxx請求。

一些經常使用參數說明：

// proxy 中間件的選擇項
var config= {
    target: 'http://www.example.org', // 目標服務器 host
    changeOrigin: true,  // 默認false，是否須要改變原始主機頭爲目標URL
    ws: true, // 是否代理websockets
    pathRewrite: {
        '^/api/old-path': '/api/new-path', // 重寫請求，好比咱們源訪問的是api/old-path，那麼請求會被解析爲/api/new-path
        '^/api/remove/path': '/path'  // 同上
    },
    router: { 
    // 若是請求主機 == 'dev.localhost:3000',
    // 重寫目標服務器 'http://www.example.org' 爲 'http://localhost:8000'
        'dev.localhost:3000' : 'http://localhost:8000'
    }
};


target：用於設置目標服務器host。
changeOrigin：默認false，是否須要改變原始主機頭爲目標URL。
ws：設置是否代理websockets。
pathRewrite：重寫目標url路徑。
router：重寫指定請求轉發目標

具體能夠參考：https://www.cnblogs.com/zhaow...

二、react項目中是怎麼執行setupProxy.js的？

在講述原理以前，咱們先拋出一個問題：爲何直接在src目錄下建立setupProxy.js文件就能夠進行跨域請求了？下面帶着這個問題來探索一番。

既然在react-scripts start啓動項目以後就能夠跨域請求，那麼確定是在編譯完後生成本地服務過程當中配置了setupProxy.js配置的中間件。就至關於express項目中先生成express實例，而後再使用實例的use方法配置中間件：

const app = express();
const bodyParser = require('body-parser');

// 使用body-parser解析請求body參數
app.use(bodyParser.json())

http-proxy-middleware中間件的使用

const express = require('express'); 
const proxy = require('http-proxy-middleware'); 

var app = express(); 
app.use('/api', proxy({target: 'http://10.119.168.87:4000', changeOrigin: true}));

當運行react-scripts start時會執行scripts目錄下的start.js腳本

start.js如引入config目錄下的paths.js以及基礎構建腳本webpack.config.js和devServer服務配置文件webpackDevServer.config.js

paths.js存放的是一些文件路徑映射，好比咱們的代理文件setupProxy.js

webpack.config.js就是基礎的構建配置，好比樣式加載解析、代碼壓縮等等。

webpackDevServer.config.js配置的就是咱們的本地服務，包括咱們的跨域請求

引入上述文件後，start.js中會生成一個本地服務去執行構建、服務配置腳本

參考：https://www.cnblogs.com/zhaow...