# 前言
? 首先強調的是webpack proxy只能用作于開發(fā)階段，臨時解決本地請求服務器（通常是測試服）產生的跨域問題线椰，并不適用線上環(huán)境。配置在webpack的 devServer 屬性中尘盼。
? 有人可能會誤會線上環(huán)境就是正式服憨愉，我們團隊曾就有人利用
process.env.NODE_ENV來區(qū)分測試服和生產服。 其實不然卿捎。
? 對于node_env來說配紫，默認只有兩種狀態(tài)即development和production，前者指代本地開發(fā)即localhost環(huán)境午阵，而后者代表發(fā)布在任何服務上的服務躺孝，node是不知道你服務是測試還是正式，除非你手動指定底桂。通常認為都是線上環(huán)境植袍。
# 設置 proxy 目的
? 為解決在本地開發(fā)時XHR異步請求跨域問題（如果你的后端小伙伴愿意給你處理，無需配置）
# 原理
? webpack中的proxy只是一層代理籽懦，用于把指定的path于个，代理去后端提供的地址，背后使用node來做server暮顺±辣簦可能有人疑惑，為什么只適用本地開發(fā)拖云？因為該技術只是在webpack打包階段在本地臨時生成了node server，來實現類似nginx 的proxy_pass的反向代理效果
? proxy工作原理實質上是利用http-proxy-middleware 這個http代理中間件应又，實現請求轉發(fā)給其他服務器宙项。例如：本地主機A為http://localhost:3000，該主機瀏覽器發(fā)送一個請求株扛，接口為/api尤筐，這個請求的數據（響應）在另外一臺服務器Bhttp://10.231.133.22:80上，這時洞就，就可以通過A主機設置webpack proxy盆繁，直接將請求發(fā)送給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：目標主機（協(xié)議+主機名）
也可以簡寫 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') }
