最近开发项目时配置代理过程中遇到一个非常低级的错误，导致配置完代理后，项目运行请求接口一直是404；并同时因为这个低级错误，自己对前端vue项目的代理配置又混乱，直至发现问题后才对代理配置清晰明了起来。本文简单记录问题解决方式及自己对vue项目中的代理配置一点小理解，避免日后再次踩坑。
vue项目中涉及的文件简单描述：
1、该项目的后台的服务地址为：http://10.10.10.10/aa
2、现在请求一个后台的验证码接口为： /code/img
3、vue项目中环境配置（.env.development文件和 .env.production文件）为：
# 开发环境配置(本地)
ENV = 'development'
NODE_ENV = development
# 开发环境 API
VUE_APP_BASE_API = '/dev-api'
# 开发环境 URL
VUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'
# 生产环境配置
ENV = 'production'
NODE_ENV = production
# 开发环境 API
VUE_APP_BASE_API = '/pro-api'
# 开发环境 URL
VUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'
4、vue项目中的代理配置（vue.config.js）为：
module.exports = {
devServer: {
// webpack-dev-server 相关配置
overlay: {
warning: false,
err: false
},
hot: true,
hotOnly: true, // 是否热更新
host: '0.0.0.0',
port: '8080',
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_REQUEST_URL,
changeOrigin: true,
pathRewrite: {
['^'+process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
}
}
5、vue项目中axios的封装文件（axios.js）为:
// 1、引入axios
import axios from 'axios'
// 2、创建axios的实例
const httpService = axios.create({
baseUrl: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_REQUEST_URL : process.env.VUE_APP_BASE_API,
timeout: 10000
})
// 5、get请求 请求参数直接放在 url? 后面
export function get (url, params = {
}, headers = {
}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params,
headers: headers
}).then(res => {
if (res) {
resolve(res)
}
}).catch(err => {
reject(err)
})
})
}
6、接口请求文件为：
import {
post, get, urls } from '../../axios.js'
// 获取图形验证码
export const getImgCode = () => get('/code/img')
问题所在：
1、axios.js文件中创建实例后的全局基础路径配置错误，不是 baseUrl 而是 baseURL ,改成baseURL接口就能访问成功，不会出现404，即：
const httpService = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_REQUEST_URL : process.env.VUE_APP_BASE_API,
timeout: 10000
})
扩展：由于axios这个全局基础路径配置失误，导致自己对vue的前端代理配置理解陷入混乱中，直至发现这个问题的根源，突然对代理的配置一下子清晰起来，简单说一下：
module.exports = {
devServer: {
// webpack-dev-server 相关配置
overlay: {
warning: false,
err: false
},
hot: true,
hotOnly: true, // 是否热更新
host: '0.0.0.0',
port: '8080',
open: true,
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_REQUEST_URL,
changeOrigin: true,
pathRewrite: {
['^'+process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
}
}
1、后台的验证码接口地址是：http://10.10.10.10/aa/code/img
2、其中前端设置 process.env.VUE_APP_REQUEST_URL = http://10.10.10.10/aa
3、前端本地环境配置 process.env.VUE_APP_BASE_API = ’dev-api‘ ; 前端生产环境配置process.env.VUE_APP_BASE_API = ’pro-api‘ ;
4、代理过程：
1、首先在 devServer 中设置了 process.env.VUE_APP_BASE_API ，target中设置了代理的目标服务器地址 : process.env.VUE_APP_REQUEST_URL, 也就是接口最开头的那个地址
2、这个时候如果访问接口如： /code/img,就可以全局使用 process.env.VUE_APP_BASE_API ，
此时 process.env.VUE_APP_BASE_API 就相当于 process.env.VUE_APP_REQUEST_URL，
也就是说我们请求 /code/img 就相当于请求 http://10.10.10.10/aa/dev-api/code/img（本地环境） 或 http://10.10.10.10/aa/pro-api/code/img
3、pathRewrite的作用是将 process.env.VUE_APP_BASE_API 进行替换,如果接口中没有 process.env.VUE_APP_BASE_API，那就替换成 '' ,
如果接口中需要 process.env.VUE_APP_BASE_API， 那么就需要写成 ['^'+process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API，可以理解成为一个重定向或者重新赋值的作用，
我本地这个项目是不需要有 process.env.VUE_APP_BASE_API ，所以就写成了 ['^'+process.env.VUE_APP_BASE_API]: '', 这样我请求 /code/img 就相当于请求 http://10.10.10.10/aa/code/img