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，是否进行代理
    }),
  );
}

express结合http-proxy-middleware配置生成一个反向代理服务器，代理到与请求在同一域名上http://localhost:3000，http://localhost:3000/mock/1241/xxx就是在请求代理服务器，然后代理服务器转发到http://10.118.71.83: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：重写指定请求转发目标

正向代理与反向代理区别？

正向代理：
当客户端想要请求服务端时，客户端会将请求代理给正向代理服务器，正向代理服务器接收到请求后，会主动去请求服务端，服务端接收请求后，会将响应数据返回给正向代理服务器，最后由正向代理服务器将服务端响应的数据转发给客户端。这样就实现了客户端与服务端的请求与响应。

正向代理的用途：

• 加速资源访问，正向代理服务器可以缓存一些比较热的资源，当客户端请求这些热资源时，正向代理服务器就不需要再次请求服务端去获取资源了，只要取本地的缓存资源即可（可能存在缓存与服务端资源不一致的问题）。
• 对客户端访问授权，上网进行认证（是否还有流量或者话费上网）。
• 正向代理服务器可以记录用户访问记录（上网行为管理），对外隐藏用户信息。

例子：学校晚上断网、VPN

反向代理：
当客户端想要请求服务端时，客户端实际上请求的是反向代理服务器（服务端集群只需要暴露反向代理服务器即可），反向代理服务器接收到客户端的请求后，通过一定的策略，选择合适的服务端进行请求，服务端接收请求后，会将响应数据返回给反向代理服务器，最后由反向代理服务器将服务端响应的数据转发给客户端。这样就实现了客户端与服务端的请求与响应，而真正的服务端可以不暴露在外网环境下，保证了服务端的安全。

反向代理的作用：

• 保证各种服务在内网的安全，防止web攻击，大型网站，通常将反向代理服务器作为公网访问地址，各种服务则处于内网之中。
• 负载均衡，反向代理服务器选择合适的服务进行请求，实现流量的负载均衡。
• 限流，当流量实在过大时，机器无法负载的情况下，反向代理服务器可以限制一部分流量请求服务（让请求失败）。
• 数据预处理，处理请求的数据，让服务端能够识别，以及在服务端的响应数据中添加或者删除一些数据等。

例子：淘宝购物负载均衡、网关

http-proxy-middleware反向代理例子

启动代理

var express = require('express');
var { createProxyMiddleware } = require('http-proxy-middleware');
var app = express();
app.use('/api', createProxyMiddleware({target: 'http://localhost:3001/', changeOrigin: true}));
app.listen(3000);

启动后台服务

var express = require('express')
//2. 创建express服务器
var server = express()
//3. 访问服务器(get或者post)
//参数一: 请求根路径
//3.1 get请求
server.get('/api', function (request, response) {
 // console.log(request)
 response.send('get请求成功')
})
//3.2 post请求
server.post('/', function (request, response) {
 response.send('post请求成功')
})
//4. 绑定端口
server.listen(3001)
console.log('启动3001')

postman请求结果：

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中生成一个本地服务实例（const app = express()）后会根据构建、代理配置文件等配置中间件，然后启动服务

其实，创建本地服务使用的是webpack-dev-server包，而这个包是基于express实现的

const WebpackDevServer = require('webpack-dev-server');

const devServer = new WebpackDevServer(compiler, serverConfig);

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