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创建div 实现代码
Apr 27 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
js瀑布流布局的实现
Jun 28 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 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
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
Dom与浏览器兼容性说明
2010/10/25 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
js实现五星评价功能
2017/03/08 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
python的类变量和成员变量用法实例教程
2014/08/25 Python
Django中几种重定向方法
2015/04/28 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
小学雷锋月活动总结
2014/07/03 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书