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: },