详解webpack的proxyTable无效的解决方案


Posted in Javascript onJune 15, 2018

最近遇到这个需要单页访问跨域后台的问题。

可以按照如下设置:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}

这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.

那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}

遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。

经过几轮测试,总结出一下几种解决方案:

1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器F12调试的时候看到的依然会是提示404。
并且注意,在F12看到的js提示错误的域名,是js写的那个域名,并不是代理后的域名。

另外配置正常的话,在idea的控制台,会有错误提示显示,例如:

  Your application is running here:http://localhost:8082                                                                                                                                                                                             [HPM] Error occurred while trying to proxy request /api/user/ts from localhost:8082 to http://localhost:1920/ (ECONNREFUSED)

2.(奇葩解决)个人感觉这个http代理的插件有缓存,proxyTable的修改会无效,这时候可以尝试修改启动项目的端口,就在proxyTable属性配置的下面几行有个port: 8080,改成其他,例如8081,就会有效,然后再改回来就好。

3.这个比较多人说了,就是要手动再执行一次npm run dev

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

Javascript 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 #Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 #Javascript
webpack公共组件引用路径简化小技巧
Jun 15 #Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 #Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 #Javascript
详解vue组件开发脚手架
Jun 15 #Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 #Javascript
You might like
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
大学生在校学习的自我评价
2014/02/18 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
保研导师推荐信
2015/03/25 职场文书
花田少年史观后感
2015/06/16 职场文书
小学庆六一主持词
2015/06/30 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS