详解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 相关文章推荐
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Vue常用API、高级API的相关总结
Feb 02 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 无限分类的树类代码
2009/12/03 PHP
php权重计算方法代码分享
2014/01/09 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP 快速排序算法详解
2014/11/10 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
理解Javascript闭包
2013/11/01 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
js实现登录与注册界面
2017/11/01 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
简单了解python PEP的一些知识
2019/07/13 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
医科大学生的自我评价
2013/12/04 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
家长通知书家长意见
2014/12/30 职场文书
公务员年终个人总结
2015/02/12 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python