最近，换了下服务器，用vue开发的项目，前后端分离的，部署后发现这样的问题：
所有访问api的url返回的都是404，该项目前端包括3个部分，pc端、h5端以及小程序，他们都是访问同一个接口地址。小程序是没有问题，说明接口服务不存在问题。
目前出现问题的是pc端和h5端。
说下我的服务器环境吧：
1、tomcat8，(提供接口服务的)
2、Apache2.4.43
该项目用到的环境就这2个，当然mysql数据库就不多说了。
后来经过一系列的排查，是apache设置的缘故。需要在前端站点的【配置文件】下加下以下代码：
ProxyPass /api http://www.xxx.cn
另外，在看下我的proxyTable配置吧proxyTable: {
'/api/*': {
target: 'https://www.xxx.cn',
changeOrigin: true,
pathRewrite: {
'/api': ''
}
}
},
其实在我们之前的文章也讲过这个配置了，只是后来忘记了：Apache服务器配置跨域：通过设置反向代理进行跨域
对于proxyTable设置不明白的，还可以看下本站的这篇文章：vue跨域proxyTable配置详解

vue-cli 设置跨域代理，本地正常访问，线上地址报404。这是什么原因？
vue-cli中跨域代理设置：
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://xxx.xxx-xxx.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// Various Dev Server settings
host: ip(), // can be overwritten by process.env.HOST
port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.
showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false,
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
utils.js 文件中的请求地址设置:
function network (path, flag) {
if (flag) {
return `api/${path}`
}
return `api/api/${path}`
}
本地请求正常，线上请求会报404 的错误，线上报错图片：

情景：在写vue cli 中的代理时，百度了好久也没代理上，最终的问题出在路径重写上。特此记录一下，如果有跟我有一样问题的小伙伴，欢迎前来参考，可根据各自情况和实际问题进行调试。

接口地址：



 

代理地址为（开发环境）：

// .env.development 文件中

、

VUE_APP_BASE_API 在不同环境（ .env.production文件， .env.staging等文件中）为不同地址。如没有此处，代理地址写死的话，下面的proxy中也要将对应代理地址改掉。如：part2中。

 

 



注意：百度上搜的重新路径都是  ‘’  (空路径），一直代理不过去。找了半天发现需要代理到  '/' （根路径）。卡了好久，距离就差了这一点点问题（啊 啊啊啊 啊啊）。

 *此处需要根据自己的接口状况来调试代理路径地址

 

浏览器中接口requestURL显示：



response中已返回数据：



 

（part2）不需动态改变proxy需代理的路径（即：下图 'api' 位置处）

//vue.config.js 文件中



将地址中       '/api'    代理到      '/'       中.

输出为：http://127.0.0.1:8080/userInfo/getUserInfoList.do

 

前言
因为项目中遇到了这个bug：Vue cil2中配置代理proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人；
正文
1. 为什么要使用代理？
代理的作用是：把请求代理转发到其他服务器的中间件；
例如：我们当前主机为http://localhost:8080/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请求，而希望由另一台服务器https://www.example.org/api来处理这个请求怎么办？
这时候就要使用代理来解决！
2. 在vue中如何使用多个代理？
module.exports = {
dev: {
proxyTable: {
// 第一个代理
'/api-test': {
target: 'https://www.example.org:', /// 目标服务器 host
ws:true, //是否启用websocket
secure: true, // 如果是https接口，需要配置这个参数
changeOrigin: true, // // 默认false，是否需要改变原始主机头为目标URL，是否跨域
pathRewrite: {
'^/api-test/old': '/api-test/new' // 重写请求，比如我们源访问的是api-test/old，那么请求会被解析为/api-test/new
},
//第二个代理
'/api-else': {
target: 'https://197.32.22.33:8090',
ws:true, //是否启用websocket
secure: true,
changeOrigin: true,
pathRewrite: {
'^/api-else': '' //默认写法，如果不写pathRewrite就是默认为空；
},
//第三个代理
'/api-three': {
target: 'https://197.32.22.33:9090',
changeOrigin: true,
pathRewrite: {
'^/api-three': '/api-three' //重写请求，这样本地请求不会有两次/api-three
},
}
},
上述代码即可在vue-cil项目中配置代理；
代理的参数有很多，详细可以查看：http-proxy-middleware中的Options，自行添加；
那下面我们来解析一下为什么会：Vue代理本地proxytable成功，却无效报错404的几种情况
3. bug 原因分析
1.在浏览器或postman中测试接口是否正常访问；(最重要！！不然改半天都没用)
那怎么才是成功的访问呢？
例如：拿第二个代理举例：你要访问的接口为https://197.32.22.33:8090/api-else/getsomething.json，在浏览器直接输入有返回值并测试无误后再进行下一步；
2.要确保书写方式完全正确！
2.1(参考写法2) 这时候你本地去请求的接口地址会变成：http://localhost:8080/api-else/api-else/getsomething.json才是正常的！
是不是会好奇为什么会有两个/api-else，因为在本地：http://localhost:8080/api-else相当于：https://197.32.22.33:8090，这才是正常的！
2.2 (参考写法3)
在按上述写法还是有误的情况下，可以参考写法3的路由去更改测试。例：你要访问的接口为https://197.32.22.33:9090/api-three/getThreething.json，本地配置后：http://localhost:8080/api-three/getThreething.json。
多说一句，为什么要提第三种写法？
这种适用于前后端分离多后台项目，后台项目的包名为：api-three，使用第2中写法，在打包之后部署生产环境会出现请求的问题(我们自己项目踩过的坑，偶发)，所以之后规定代理和后台包名统一，并且不能直接写在请求中，而是在配置代理后，重写代理的请求，指向包名；
3.请修改完config的index.js后，答应我一定重启下项目npm run dev；
4.也是我这次bug的原因(正经脸，这个超级细微！)
在配置多个代理的情况下，代理名称不能相同，也不能出现重叠的情况！
错误示范(第二个代理失效)：
proxyTable: {
// 第一个代理
'/api-test': {
target: 'https://www.example.org:', /// 目标服务器 host
},
//第二个代理
'/api-testAAA': {
target: 'https://197.32.22.33:8090',
}
这的错误真的很难发现，在查了源码才看懂的；
这里说一下，为什么这样写会404！
vue的代理是基于 http-proxy-middleware实现的，而http-proxy-middleware对走哪个代理名称的的方法如下：
function matchSingleStringPath(context, uri) {
const pathname = getUrlPathName(uri);
return pathname.indexOf(context) === 0;
}
是的！他用的是indexOf() === 0来判断的！！！所以如果你的多个代理重叠/api-testAAA和/api-test这样出现的话，他们是都会返回true的！
但是/api-test更快判断完，所以/api-testAAA就失效了！！！
结语
说明：Vue cil的版本号是2，老版本的项目了；之后会记录下新版本vue cil 3+学习过程；
好了，吐槽完了，希望大家都不要踩坑~
补充知识：关于Vue的生产环境proxyTable代理问题
1、通过在 config/index.js 配置文件中找到proxyTable配置项
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //3
target: 'http://xxx:8080',
changeOrigin: true,
// secure:false 代理https必须要加
pathRewrite: {
// 1 '^/api': '/api' 这种接口配置出来  http://xxx:8080/api/getlist
// 2 ^/api': '/' 这种接口配置出来  http://xxx:8080/getlist
}
}
}
}
2、上面代码里的1和2的区别
当你接口有api的时候就需要^api的意思就是有api会首先使用api，防止被系统认为3处的api，如果接口中没有api则不需要，即可以省略，总结：
接口以“/api”开头的配置 数字1 ，没有则不需要
3、如果配置多个代理
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { //3
target: 'http://xxx:8080',
changeOrigin: true,
pathRewrite: {
// A '^/api': '/api' 这种接口配置出来  http://xxx:8080/api/getlist
// ^/api': '/' 这种接口配置出来  http://xxx:8080/getlist
}
}，
'/api/1': { //
target: 'http://xxx:8081',
changeOrigin: true,
pathRewrite: {
// A '^/api/1': '/api/1' 这种接口配置出来  http://xxx:8081/api/1/getlist
// ^/api/1': '/' 这种接口配置出来  http://xxx:80801/getlist
}
}
}
}
上面的调用接口的时候：
A/api/1/getlist 即可 http://xxx:8081/api/1/getlist
/api/getlist 即可 http://xxx:8080/api/getlist
第二种情况
/api/1/getlist 即可 http://xxx:8081/getlist
/api/getlist 即可 http://xxx:8080/getlist
以上这篇解决VueCil代理本地proxytable无效报错404的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。