Vue代理请求数据出现404问题及解决
作者：小羔子1997
这篇文章主要介绍了Vue代理请求数据出现404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue代理请求数据出现404
当使用代理解决跨域问题出现404错误时，一般有两种原因。
需要进行pathRewrite重写
比如：你想访问的真实地址为http://39.98.123.211/user/list，你请求的url为/api/user/list下面是你的代理程序
module.exports = {
lintOnSave:false,
//配置代理跨域
devServer:{
proxy:{
"/api":{
target:"http://39.98.123.211",
}
}
}
}如果没有对/api重写，那么代理完你真实的地址则为：http://39.98.123.211/api/user/list，明显多了/api，因此会出现404错误。
我们进行代理时，路径中有/api，则会使用http://39.98.123.211，再加上url，则就为我们的请求地址 http://39.98.123.211/api/user/list。
所以要对/api重写，如果你的真实路径中正好为http://39.98.123.211/api/user/list，包含了/api那就不用重写。
因此将代码改为：
module.exports = {
lintOnSave:false,
//配置代理跨域
devServer:{
proxy:{
"/api":{
target:"http://39.98.123.211",
pathRewrite:{
'^/api':'',
}
}
}
}
}如果无法解决404错误，则使用第二种方法。
将代理代码放入config文件夹下的index.js文件中
如果你是vue3项目则在vue.config.js中写代理即可，如果你是vue2项目，代理请求出现404，且第一种方法无效，则将代理代码写入config文件夹下的index.js中的proxyTable：{}中
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
//配置代理跨域
"/api":{
target:"http://39.98.123.211",
},
},由于我的真实地址中有/api所以就没进行/api重写。记住代理写完，要重写运行项目。
vue跨越解决以及代理之后会出现404
1.根目录下创建vue.config.js
// vue.config.js
module.exports = {
devServer: {
proxy: {
// 当你vue请求路径中包含/api，那么vue会自动帮你代理请求到你的后端地址
// 比如我vue请求的是 '/api/user/getUser'，那么会帮我代理请求到后端地址
'/api': {
// 后端地址
target: "http://127.0.0.1:8088",
/**
官方文档的意思：将主机头的来源更改为目标 URL
简单理解就是需不需要代理
**/
changeOrigin: true,
/**
重写目标地址，比如我vue请求的是/api/user/getUser
经历过重写之后，我们请求的地址是http://localhost:8081/user/getUser
这里用的是正则表达式，^符号是用来限制开头
意思就是匹配vue请求的开头是否为/api，是的话就进行重写替换
**/
pathRewrite: {
["^/api"]: ""
}
}
}
}
}2.接口写法,
this.axios({method:"post",url:"/user/login",data:{
tel:"admin",
passWord:"admin"
}}).then(res=>{
console.log(res)
}) 在main.js中加入
axios.defaults.baseURL = '/api'
3.重新启动项目
4.要是以上都没有问题还是404 那就是缓存了，换浏览器，多重启几次！！！我的就是莫名奇妙就好了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。