vue-cli搭建项目中axios拦截器配置及不同接口对应不同后端接口域名配置_vue拦截器如何配置不同headers以及其他参数-CSDN博客

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/135387374

本文详细介绍了如何在VueCLI项目中使用axios进行基础配置，包括请求和响应拦截器，并讨论了如何根据不同接口类型配置不同的后端接口域名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli搭建项目中axios拦截器配置及不同接口对应不同后端接口域名配置

一、axios基础配置
二、不同接口对应不同后端接口域名配置

一、axios基础配置

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
//创建axios实例
const service = axios.create({
    timeout: 5000,
    withCredentials: false,
})
//请求拦截
service.interceptors.request.use(
    config => {
        if (config.isCustomHeader) {
            config.headers['FLAGINFO-CLIENTID'] = 'WEB:DC'
        }
        if (store.state.token) {
            if (config.isCustomHeader) {
                config.headers['FLAGINFO-SSO-TOKEN'] = store.state.token
            } else {
                config.headers['token'] = store.state.token
            }
        }   
        config.url = process.env.VUE_APP_WEB_API + config.url       
        // get请求缓存处理
        if (config.params) {
            config.params.f_rnd = new Date().getTime()
        } else {
            config.params = {
                f_rnd: new Date().getTime(),
            }
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

//响应拦截器
service.interceptors.response.use(
    ({ data }) => {
        // let res = respone.data; // 如果返回的结果是data.data的，嫌麻烦可以用这个，return res
        if (data.code && data.code !== 200) {
            Message({
                showClose: true,
                message: data.message || data.msg,
                duration: 2000,
                type: 'error',
            })
            return Promise.reject(data)
        }
        return data
    },
    error => {
        console.log('error：' + error) // 用于调试
        return Promise.reject(error)
    }
)
export default service

二、不同接口对应不同后端接口域名配置

export function login(data) {
    return request({
        url: '/soo/loginUrl',
        method: 'post',
        data: data,
        isUserCenter: true,
    })
}
// 判断下该用户是否存在
export function trueUser(phone) {
    return request({
        url: `/loginGet/checkUserPhone/${phone} `,
        method: 'get',
    })
}

// 请求拦截器中
if (config.isUserCenter) {
   //登录接口isUserCenter
   config.url = process.env.API_USER_CENTER + config.url
} else {
   config.url = process.env.API_SERVER + config.url
}