# 前言
首先强调的是 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')
- }
来源: http://www.jianshu.com/p/8fd5d7347c57