本文针对webpack 3.6与webpack-dev-server 2.9.1版本，探讨proxyTable配置中pathRewrite无效的问题。通过对比网络常见方法与作者实测结果，指出将匹配键从'/api'改为'/api/*'可有效解决路径重写失效导致的跨域请求失败，并提供具体配置示例。
问题背景与版本说明
作者使用的webpack版本为3.6，webpack-dev-server版本为2.9.1。在尝试网上多种方法未果后，通过自行测试找到了可行的解决方案。推测网络上多数教程缺乏实际验证，仅照搬文档内容。
webpack代理配置基础
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
}
},
}
}
pathRewrite无效时的解决方案
另一种情况是后端接口没有/api前缀，直接为http://www.xxx.com/save/post。此时需使用pathRewrite重写地址，将本地带前缀的路径http://localhost:8080/api/save/post中的/api转换为/。网络上推荐的第一种方法经作者测试无效，折腾两天无果后，通过查看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/*'。作者未明确解释具体原理，但确认该方法可成功调通代理，供读者参考。
以上为本文全部内容，希望能为读者提供有益帮助。