webpack配置proxyTable时pathRewrite无效的解决方法


Posted in Javascript onDecember 13, 2018

本人webpack版本3.6,webpack-dev-server版本2.9.1,本人按照网上写的版本折腾两天都没通,无意间自己试通了,猜测网上大部分都是照本宣科,没有自己实践

webpack配置接口地址代理

在项目开发中,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问链接,但是我们的接口地址是  http://www.xxx.com/save/post 这样的,我们这样直接使用就会存在跨域的请求,导致接口请求不成功。

配置:

我们打开下面路径的文件

config/index.js

在其中的 dev 对象里面找到: proxyTable: {}

这里就是配置代理的地方,我们进行如下设置:

module.exports = {
 // ...
 dev: {
  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  proxyTable: {
   '/api': {
    target: 'http://www.xxx.com', // 你接口的域名
    secure: false,   // 如果是https接口,需要配置这个参数为true
    changeOrigin: true,   // 如果接口跨域,需要进行这个参数配置为true
  
   }
  },
 }
}

接口地址原本是 /save/post ,但是为了匹配代理地址,在前面加一个  /api , 因此接口地址需要写成这样的即可生效  /api/save/post 。

即:前端本地启动接口为:http://localhost:8080/api/save/post,转发的代理接口为:http://www.xxx.com/api/save/post,其中的/api为匹配项。

/api 是本地路径和后端接口路径的匹配前缀,若后端接口给了/api这个前缀,可用上面的写法。

若后端前缀不统一,则可继续添加,写法如下:

module.exports = {
 // ...
 dev: {
  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  proxyTable: {
   '/api': {
    target: 'http://www.xxx.com', // 你接口的域名
    secure: false,   // 如果是https接口,需要配置这个参数为true
    changeOrigin: true,   // 如果接口跨域,需要进行这个参数配置为true
  
   },
   '/api': {
    target: 'http://www.xxx.com', // 你接口的域名
    secure: false,   // 如果是https接口,需要配置这个参数为true
    changeOrigin: true,   // 如果接口跨域,需要进行这个参数配置为true
  
   }
  },
 }
}

那么还有一种情况,是后端的接口没有我们想要的匹配项(前缀)'/api',是直接的http://www.xxx.com/save/post,这样的接口,我们就要用到pathRewrite来重写地址,将本地路径上的带匹配前缀的路径:http://localhost:8080/api/save/post上的前缀'/api'转成 ‘ / '。以下第一种是网络上大部分推荐的,但是我亲测是无效的,估计他们多数用的上面的方法,没有实际使用下面的方法,LZ用以下第一种方法折腾了2天无果,后去看了webpack-dev-server的issue,无意义试通了接口,即下面第二种方法,当然也不排除第一种方法是我的版本问题而没有效果,所以如果大家试了第一种方法有效就当我的方法没说,如果无效,不妨试试我的第二种方法:

第一种方法(网上写的方法)

module.exports = {
 // ...
 dev: {
  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  proxyTable: {
   '/api': {
    target: 'http://www.xxx.com', // 你接口的域名
    secure: false,   // 如果是https接口,需要配置这个参数为true
    changeOrigin: true,   // 如果接口跨域,需要进行这个参数配置为true
    pathRewrite: {
     '^/api': '/'
    }
   }
  },
 }
}

第二种方法(亲测有效的方法)

module.exports = {
 // ...
 dev: {
  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  proxyTable: {
   '/api/*':{
    target: "http://XXX.XXX.com",
    changeOrigin: true,
    pathRewrite: {'/api':'/'}
   }
  },
 }
}

即将上面的匹配项从 ‘/api' 改成了 '/api/*',至于为什么,我表示也没有搞明白,不过确实调通了代理,希望对大家有帮助

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

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
简单的无缝滚动程序-仅几行代码
May 08 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 #Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 #Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
javascript对HTML字符转义与反转义
Dec 13 #Javascript
Web安全之XSS攻击与防御小结
Dec 13 #Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 #Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 #Javascript
You might like
PHP下escape解码函数的实现方法
2010/08/08 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Python中使用中文的方法
2011/02/19 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
python使用append合并两个数组的方法
2015/04/28 Python
python实现的希尔排序算法实例
2015/07/01 Python
python入门教程之识别验证码
2017/03/04 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python得到单词模式的示例
2018/10/15 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
如何用Python徒手写线性回归
2021/01/25 Python
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
高级工程师英文求职信
2014/03/19 职场文书
淘宝店策划方案
2014/06/07 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
会议主持人开场白台词
2015/05/28 职场文书
初一英语教学反思
2016/02/15 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书