详解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十个最常用的自定义函数(中文版)
Sep 07 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
Vue ​v-model相关知识总结
Jan 28 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 面向对象之成员方法详解
2013/05/04 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详细介绍Python的鸭子类型
2016/09/12 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python组合无重复三位数的实例
2018/11/13 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python向excel中写入数据的方法
2019/05/05 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
python如何进入交互模式
2020/07/06 Python
python中如何打包用户自定义模块
2020/09/23 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
禁毒宣传标语
2014/06/19 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
三行辞职书范文
2015/02/26 职场文书
运动会宣传稿100字
2015/07/23 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书