webpack proxy 使用(代理的使用)


Posted in Javascript onJanuary 10, 2020

为什么要写篇文章

这两天的开发中遇到一些需要代理才能解决的问题, 在这里记录一下, 方便以后的查阅.

为什么要用代理

跨域

在开发过程中, 我们的开发环境一般都是http:// localhost, 但是如果需要请求的数据不在本地, 那么我们就需要面对一个跨域请求的问题. 众所周知, 因为浏览器的安全协议, 我们是无法直接进行跨域请求的. 代理就是为了解决这个问题, 当然了你也可以使用jsonp 和 nginx 反向代理.

如何进行代理

webpack 配置

在这里我默认为开发环境的配置

  1. 找到 webpack.config.js 文件
  2. 在 devServer 对象下面加入以下代码
proxy: {
  '/index':{ // 这个是你要替换的位置
  
  /** 比如你要讲http://localhost:8080/index/xxx 替换成 http://10.20.30.120:8080/sth/xxx
  * 那么就需要将 index 前面的值替换掉, 或者说是替换掉根地址, 
  *你可能发现了index也是需要替换的, 没错, 我会在后续操作中处理.
  */
  
  target: 'http://10.20.30.120:8080'//这个是被替换的目标地址
  
  changeOrigin: true // 默认是false,如果需要代理需要改成true
  
  pathRewrite:{
    '^/index' : '/' //在这里 http://localhost:8080/index/xxx 已经被替换成 http://10.20.30.120:8080/
  }}
}

// 然后在你发起请求的js文件中的地址需要忽略http://10.20.30.120:8080/

//比如 demo.js
axios.post({
  url:'http://10.20.30.120:8080/sth/xxx'// 需要替换成下面的地址
  url:'/sth/xxx'
}
)

原理

实际上代理是使用了是利用http-proxy-middleware这个插件完成的, 有兴趣的话可以去搜一下,在这里我就不多做解释了.

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

Javascript 相关文章推荐
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 #Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 #Javascript
jQuery操作动画完整实例分析
Jan 10 #jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 #Javascript
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
基于JS判断对象是否是数组
Jan 10 #Javascript
You might like
php中的ini配置原理详解
2014/10/14 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
从零学Python之入门(四)运算
2014/05/27 Python
python xml解析实例详解
2016/11/14 Python
python+opencv识别图片中的圆形
2020/03/25 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Django 视图层(view)的使用
2018/11/09 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
区域总监的岗位职责
2013/11/21 职场文书
企业文化建设实施方案
2014/03/22 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
Pandas搭配lambda组合使用详解
2022/01/22 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript