最近开发项目时配置代理过程中遇到一个非常低级的错误,导致配置完代理后,项目运行请求接口一直是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# 开发环境 代理proxyVUE_APP_BASE_API = '/dev-api'# 开发环境 网关URLVUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'
# 生产环境配置ENV = 'production'NODE_ENV = production# 生产环境 代理proxyVUE_APP_BASE_API = '/pro-api'# 生产环境 网关URLVUE_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、引入axiosimport 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、前端本地环境配置代理proxy: process.env.VUE_APP_BASE_API = ‘/dev-api’ ; 前端生产环境配置代理proxy: 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/img3、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