详解Webpack-dev-server的proxy用法


Posted in Javascript onSeptember 08, 2018

前言

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。

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

在webpack.config.js中配置

下面简单介绍一下五个经常使用的场景

使用一:

mmodule.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

使用二

如果你想要代码多个路径代理到同一个target下, 你可以使用由一个或多个「具有 context 属性的对象」构成的数组:

module.exports = {
  //...
  devServer: {
    proxy: [{
      context: ['/auth', '/api'],
      target: 'http://localhost:3000',
    }]
  }
};

使用三:

如果你不想始终传递 /api ,则需要重写路径:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {'^/api' : ''}
      }
    }
  }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user

使用四:

默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,只要设置 secure: false 就行。修改配置如下:

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
};

使用五:

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。

在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径,来跳过代理请求。

例如:对于浏览器请求,你想要提供一个 HTML 页面,但是对于 API 请求则保持代理。你可以这样做:

module.exports = {
 //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        }
      }
    }
  }  
};

解决跨域原理

上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
};

vue-cli中proxyTable配置接口地址代理示例

修改 config/index.js

module.exports = {
  dev: {
  // 静态资源文件夹
  assetsSubDirectory: 'static',
  // 发布路径
  assetsPublicPath: '/',

  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
  proxyTable: {
    // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
    '/api': {
      target: 'https://wangyaxing.cn', // 接口的域名
      secure: false, // 如果是https接口,需要配置这个参数
      changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
    },
    // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
    '/img': {
      target: 'https://cdn.wangyaxing.cn', // 接口的域名
      secure: false, // 如果是https接口,需要配置这个参数
      changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
      pathRewrite: {'^/img': ''} // pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。
    }
  },
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

更多参数

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).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

参考

官方文档
http-proxy-middleware
node-http-proxy
API Proxying During Development

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
JavaScript中的Function函数
Aug 27 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 #Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 #Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
You might like
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
js获取单选按钮的数据
2006/11/27 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
详解JS函数重载
2014/12/04 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
js闭包用法实例详解
2016/12/13 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
angular学习之ngRoute路由机制
2017/04/12 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
使用Python实现简单的服务器功能
2017/08/25 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python实时监控cpu小工具
2018/06/21 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
销售顾问工作计划书
2014/09/15 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
Python超详细分步解析随机漫步
2022/03/17 Python