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...