在vue.config.js中配置开发环境的代理，测试登录的时候还是可以访问后台接口的，在测试获取用户信息接口的时候发现代理无效了。测试获取用户信息接口的时候将请求进行了重新封装，具体可以参考文章【Vue实战037：axios二次封装和使用】。封装之后再次请求后台接口时发现访问的ip变成了localhost，导致怎么请求都是错误：404 (Not Found)。
之前也写过一篇关于前端跨域的问题：【Vue实战057：前端解决No 'Access-Control-Allow-Origin' 跨域问题详解】，而且这个配置之前也是生效的。这就让人非常的头疼了....，后台无法请求后续的工作就无法继续了。最郁闷的是我让后台设置了跨域还是无法访问，这里发现利用axios.defaults.baseURL配置的远程地址没有生效，请求到的依旧是localhost。
为了判定是否是因为axios封装引起的问题，我在登录页面直接通过axios测试了post请求，但是依旧还是请求到了localhost的地址。所以问题不是出在axios封装上面，感觉还是代理配置没有生效！回家后还把前几天备份的代码拿出来重新试了下，之前都没有任何的axios封装竟然也不能跨域请求....。
添加debugger开始调试弹出提示：Cannot read property 'post' of undefined"，通过逐步调试发现axios竟然都是ReferenceError:axios is not defined，连axios都找不到当然也就无法找到axios封装的post方法了。难道是axios依赖包出现问题了？将node_modules删除后重新下载所有的依赖包测试，结果还是一样的错误！！！重新建了一个新项目，用一个button测试axios.post请求竟然也失败？？？
花了大半天的时间终于让我找到问题了，原来就是baseURL在搞鬼。baseURL的运行层级高于代理URL，如果存在baseURL则不运行代理服务。所以这里我们在设置需要清除掉baseURL配置，这里我们通过axios.create创建axios实例来清除baseURL配置（axios.defaults.baseURL = ''无效哦，axios都没定义哪来的baseURL ？）。
baseURL定义后端的绝对地址时就会报跨域提示：No 'Access-Control-Allow-Origin' header，定义相对地址就会自动拼接localhost:port，定义为空时优先选择proxy代理配置。这个昨天在家里试了下axios封装的时候是有用的，不过今天又重新研究了下发现baseURL还是可以配置的（看来前面的结论被推翻了==>配置baseURL会跳过代理）。
如果后台接口地址中存在 '/api' 前缀就可以把 pathRewrite 删掉，如果没有就需要通过pathRewrite重写路径运行后代理到对应地址将映射的'^/api'去除掉。请求数据时URL前加上“/api”就可以跨域请求了，proxy代理配中的/api限定了只有接口中含有该路径的接口才会被代理。proxy代理配置中的target设置建议只填目标地址和端口，不要直接带接口名，配置完之后重启服务。
代理一般都是由后台来配置的，很少在前端配置所以遇到这种问题也是让人特别让人脑壳疼。以上内容是小编给大家分享的【Vue实战087：cli4配置proxy代理失效问题解决】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
这里做个记录，下面附上本文用到的源码：
//完整的请求地址：http://10.134.112.186:8010/api/login
//main.js
import axios from 'axios' // 引入axios
axios.defaults.baseURL = '/api'
//vue.config.js配置proxy代理
proxy: {
'/api': {
target: 'http://10.134.112.186:8010/api', // API服务器的地址
changeOrigin: true, // 设置是否允许跨域 默认false
}
}
//请求方法，省略判断
HandleLogin () {
this.$axios.post('/login', this.$qs.stringify(this.loginForm)).then(res => {
console.log(res)
this.$router.push({ path: '/home' })}
}).catch(() => { this.loading = false })}else {return false}
})
},
--------------------------------------axios封装的配置--------------------------------------
proxy: { // 设置代理
'/api': { // 将域名印射到"/api"
target: 'http://10.134.112.186:8010', // 目标服务器接口
changeOrigin: true, // 设置是否允许跨域 默认false
pathRewrite: {
'^/api': '' // 重写路径运行后就代理到对应地址
}
}
}
HandleLogin () {
this.loading = true
this.$refs['rulesForm'].validate(valid => {
if (valid) {
this.$axios.post('/login', this.$qs.stringify(this.loginForm)).then(res => {
if(res.status===200){
this.loading = false
this.$router.push({ path: '/home' })}
}).catch(() => { this.loading = false })}else {return false}
})
},
import axios from 'axios' // 引入axios
const service = axios.create({
baseURL: '', // 设置了proxy代理时这里为空，否则代理会失效
timeout: 1000 //超时
})
//下面可以添加请求拦截器来处理请求发出前的操作和响应拦截器处理响应数据后的操作，这里忽略！
export default service
