Webpack Proxy工作原理（本地跨域）

# 前言

首先强调的是webpack proxy只能用作于开发阶段，临时解决本地请求服务器（通常是测试服）产生的跨域问题，并不适用线上环境。配置在webpack的 devServer 属性中。

有人可能会误会线上环境就是正式服，我们团队曾就有人利用process.env.NODE_ENV来区分测试服和生产服。其实不然。
对于node_env来说，默认只有两种状态即development和production，前者指代本地开发即localhost环境，而后者代表发布在任何服务上的服务，node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。

# 设置 proxy 目的

为解决在本地开发时XHR异步请求跨域问题（如果你的后端小伙伴愿意给你处理，无需配置）

# 原理

webpack中的proxy只是一层代理，用于把指定的path，代理去后端提供的地址，背后使用node来做server。可能有人疑惑，为什么只适用本地开发？因为该技术只是在webpack打包阶段在本地临时生成了node server，来实现类似nginx 的proxy_pass的反向代理效果

proxy工作原理实质上是利用http-proxy-middleware 这个http代理中间件，实现请求转发给其他服务器。例如：本地主机A为http://localhost:3000，该主机浏览器发送一个请求，接口为/api，这个请求的数据（响应）在另外一台服务器Bhttp://10.231.133.22:80上，这时，就可以通过A主机设置webpack proxy，直接将请求发送给B主机。

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

var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

必须配置changeOrigin= true

# 核心概念

var proxy = require('http-proxy-middleware');

var apiProxy = proxy('/api', {target: 'http://www.example.org'});
//                   \____/   \_____________________________/
//                     |                    |
//                   context             options

content：用于定义哪些请求需要被目标主机代理
option.target：目标主机（协议+主机名）

也可以简写 var apiProxy = proxy('http://www.example.org/api');

option的几种配置
option.pathRewrite: 重写目标的url路径，key用正则表达式来匹配路径

// 重写路径
pathRewrite: {'^/old/api' : '/new/api'}

// 移除路径
pathRewrite: {'^/remove/api' : ''}

// 添加基础路径
pathRewrite: {'^/' : '/basepath/'}

// 路径自定义
pathRewrite: function (path, req) { return path.replace('/api', '/base/api') }

最后编辑于：2019.10.11 17:17:02