详解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 相关文章推荐
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
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
Yii扩展组件编写方法实例分析
2015/06/29 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
基于Python的文件类型和字符串详解
2017/12/21 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
对Django外键关系的描述
2019/07/26 Python
python2 对excel表格操作完整示例
2020/02/23 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
军训自我鉴定200字
2014/02/13 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
JavaScript 定时器详情
2021/11/11 Javascript