Webpack Dev Server Proxy

Table of Contents

→ 转载自 详解Webpack-dev-server的proxy用法 ,了解更多1

解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~)

*注:F12 查看网络请求路径,还是原来的,所以只能从效果上去观察是否正确代理了。

基本用法

 1: module.exports = {
 2:     //...
 3:     devServer: {
 4:         proxy: {
 5:             '/api': 'http://localhost:3000'
 6:         }
 7:     }
 8: };
 9: 
10: // 请求到 `/api/xxx` 现在会被代理到请求 http://localhost:3000/api/xxx ,
11: // 例如 `/api/user` 现在会被代理到请求 http://localhost:3000/api/user

代理多个路径

 1: module.exports = {
 2:     //...
 3:     devServer: {
 4:         proxy: [{
 5:             context: ['/auth', '/api'],
 6:             target: 'http://localhost:3000',
 7:         }]
 8:     }
 9: };
10: 
11: // 如果你想要代码多个路径代理到同一个 `target` 下,
12: // 你可以使用由一个或多个「具有 `context` 属性的对象」构成的数组:

忽略API前缀

 1: module.exports = {
 2:     //...
 3:     devServer: {
 4:         proxy: {
 5:             '/api': {
 6:                 target: 'http://localhost:3000',
 7:                 pathRewrite: {'^/api' : ''}
 8:             }
 9:         }
10:     }
11: };
12: 
13: // 请求到 `/api/xxx` 现在会被代理到请求 http://localhost:3000/xxx ,
14: // 例如 `/api/user` 现在会被代理到请求 http://localhost:3000/user

忽略https安全提示

 1: module.exports = {
 2:     //...
 3:     devServer: {
 4:         proxy: {
 5:             '/api': {
 6:                 target: 'https://other-server.example.com',
 7:                 secure: false
 8:             }
 9:         }
10:     }
11: };
12: 
13: // 默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。
14: // 如果你想要接受,只要设置 `secure: false` 就行。

自定义规则

 1: module.exports = {
 2:     //...
 3:     devServer: {
 4:         proxy: {
 5:             '/api': {
 6:                 target: 'http://localhost:3000',
 7:                 bypass: function(req, res, proxyOptions) {
 8:                     if (req.headers.accept.indexOf('html') !== -1) {
 9:                         console.log('Skipping proxy for browser request.');
10:                         return '/index.html';
11:                     }
12:                 }
13:             }
14:         }
15:     }
16: };
17: 
18: // 有时你不想代理所有的请求,可以基于一个函数的返回值绕过代理。
19: // 在函数中你可以访问请求体、响应体和代理选项,必须返回 false 或路径,来跳过代理请求。
20: 
21: // 例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。

跨域

 1: module.exports = {
 2:     //...
 3:     devServer: {
 4:         proxy: {
 5:             '/api': {
 6:                 target: 'http://localhost:3000',
 7:                 changeOrigin: true,
 8:             }
 9:         }
10:     }
11: };
12: 
13: // 上面的参数列表中有一个 `changeOrigin` 参数, 是一个布尔值,
14: // 设置为 `true`, 本地就会虚拟一个服务器接收你的请求并代你发送该请求

配置多个规则:Vue-cli中 `proxyTable` 配置接口

 1: module.exports = {
 2:     dev: {
 3:         // 静态资源文件夹
 4:         assetsSubDirectory: 'static',
 5:         // 发布路径
 6:         assetsPublicPath: '/',
 7: 
 8:         // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
 9:         // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
10:         proxyTable: {
11:             // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
12:             '/api': {
13:                 target: 'https://wangyaxing.cn', // 接口的域名
14:                 secure: false,                   // 如果是https接口,需要配置这个参数
15:                 changeOrigin: true,              // 如果接口跨域,需要进行这个参数配置
16:             },
17:             // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
18:             '/img': {
19:                 target: 'https://cdn.wangyaxing.cn', // 接口的域名
20:                 secure: false,                       // 如果是https接口,需要配置这个参数
21:                 changeOrigin: true,                  // 如果接口跨域,需要进行这个参数配置
22:                 pathRewrite: {'^/img': ''}           // pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。
23:             }
24:         },
25:         // Various Dev Server settings
26:         host: 'localhost', // can be overwritten by process.env.HOST
27:         port: 4200,        // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
28:     }
29: }

更多参数

dev-server 使用了非常强大的http-proxy-middleware ,
http-proxy-middleware 基于 http-proxy 实现的,
可以查看 http-proxy 的源码和文档:https://github.com/nodejitsu/node-http-proxy。

- target:要使用url模块解析的url字符串
- forward:要使用url模块解析的url字符串
- agent:要传递给 http(s)s.request 的对象(请参阅 Node 的 https 代理和 http 代理对象)
- ssl:要传递给 https.createServer() 的对象
- ws:true / false,是否代理 websockets
- xfwd:true / false,添加 x-forward 标头
- secure:true / false,是否验证 SSL Certs
- toProxy:true / false,传递绝对URL作为路径(对代理代理很有用)
- prependPath:true / false,默认值:true - 指定是否要将目标的路径添加到代理路径
- ignorePath:true / false,默认值:false - 指定是否要忽略传入请求的代理路径(注意:如果需要,您必须附加/手动)
- localAddress:要为传出连接绑定的本地接口字符串
- changeOrigin:true / false,默认值:false - 将主机标头的原点更改为目标 URL

vue-element-admin分析代码

 1: // 环境变量:VUE_APP_BASE_API = '/dev-api'
 2: // 发送的请求:127.0.0.1/dev-api/login
 3: 
 4: proxy: {
 5:     // change dev-api/login => /login
 6:     // detail: https://cli.vuejs.org/config/#devserver-proxy
 7:     [process.env.VUE_APP_BASE_API]: {
 8:         target: `https://my.baidu.com`,
 9:         changeOrigin: true,
10:         pathRewrite: {
11:             ['^' + process.env.VUE_APP_BASE_API]: ''
12:         }
13:     }
14: },

Footnotes:

Date: 2020-11-02 Mon 14:39

Author: Jack Liu

Created: 2020-11-02 Mon 15:07

Validate