vue.js封装axios，axios跨域

参考：https://blog.csdn.net/w137160164/article/details/131181994
更新了vue3相关代码，这是我自己留着备用的，用的时候直接copy改一下，没想到会有这么多人看。。。
代码

import axios from 'axios';
import { MessageBox, Message } from 'element-ui';
import store from '@/store';
import router from '@/router';
import { setToken, getToken, removeToken } from "@/utils/cookies";

// create an axios instance
const service = axios.create({
    baseURL: store.state.baseDomain, // http://localhost:21021/
    // withCredentials: true, // send cookies when cross-domain requests
    //timeout: 5000 // request timeout
    //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
    xsrfCookieName: 'XSRF-TOKEN', // default
    // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
})

// request interceptor
service.interceptors.request.use(
    config => {
        // do something before request is sent
        let token = getToken();
        if (token != undefined && token != '') {
            // let each request carry token
            // ['X-Token'] is a custom headers key
            // please modify it according to the actual situation
            config.headers['Authorization'] = 'Bearer ' + token;
        }
        return config
    },
    error => {
        // do something with request error
        // console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
    /**
       * If you want to get http information such as headers or status
       * Please return  response => response
      */

    /**
       * Determine the request status by custom code
       * Here is just an example
       * You can also judge the status by HTTP Status Code
       */
    response => {
        const res = response.data

        if (res.__abp) {
            return handleResponse(response)
        }

        // if the custom code is not 20000, it is judged as an error.
        if (response.status !== 200) {

            Message({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            })

            // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
            if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
                // to re-login
                MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
                    confirmButtonText: 'Re-Login',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(() => {
                    store.dispatch('resetToken').then(() => {
                        location.reload()
                    })
                })
            }
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        // console.log('response error =>', error.response) // for debug
        if (error.response.data.__abp) {
            return handleResponse(error.response)
        }
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

/**
 * 请求结果重新组织
 * 参考 Abp 的 js 是 abp.ng.js
 * @param {*} response
 */
function handleResponse(response) {
    var originalData = response.data
    if (originalData.success === true) {
        response.data = originalData.result
        return response
    } else if (originalData.success === false) {
        // var messagePromise = null

        if (response.status == 401 && response.config.abpHandleError !== false) {
            // abp.ng.http.handleUnAuthorizedRequest(messagePromise, originalData.targetUrl);
            // 会话过期，跳转到登录页
            store.dispatch('resetToken').then(_ => {
                router.push(`/login?redirect=${location.hash.replace('#', '')}${location.search}`).catch(() => { })
            })
            originalData.error.message = '为了您的帐号安全，请重新登录';
        }

        if (originalData.error) {
            if (response.config.abpHandleError !== false) {
                Message.error(originalData.error.message || '请求出错了！！！')
            }
        } else {
            originalData.error = defaultError
        }

        response.data = originalData.error
        return Promise.reject(response)

    } else {
        // not wrapped result
        return Promise.reject(response)
    }
}

window.request = service;
export default service

 示例：

import request from '@/utils/request'

export function login(data) {
    return request({
        url: `/api/TokenAuth/Authenticate`,
        method: 'post',
        data
    })
}

 vue3

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

import axios from 'axios'; import {setCookie,getCookie,removeCookie} from '@/util/cookie'   import pinia from '@/stores/store' import { useSystemDataStore } from "@/stores/index"; // SystemDataStore 可以在本文件中随意使用 const SystemDataStore = useSystemDataStore(pinia);    // create an axios instance const service = axios.create({     baseURL: SystemDataStore.apiDomain,//http://localhost:29611/     // withCredentials: true, // send cookies when cross-domain requests     //timeout: 5000 // request timeout     //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称     xsrfCookieName: 'XSRF-TOKEN', // default     // `xsrfHeaderName`是携带xsrf令牌值的http头的名称     xsrfHeaderName: 'X-XSRF-TOKEN', // default     "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",//application/json     Accept: 'application/json', }); // 表示跨域请求时是否需要使用凭证 允许跨域携带cookie信息 service.defaults.withCredentials = false; // 允许跨域 service.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*";   service.interceptors.request.use(     config => {         let token = getCookie('XSRF-TOKEN');         if (token != undefined && token != '') {             // let each request carry token             // ['X-Token'] is a custom headers key             // please modify it according to the actual situation             config.headers['Authorization'] = 'Bearer ' + token;         }         return config;     },     error => {         return Promise.reject(error);     } );   service.interceptors.response.use(     response => {         if (response.status == 200) {             return Promise.resolve(response);         } else {             return Promise.reject(response);         }     },     error => {         alert(JSON.stringify(error), '请求异常', {             confirmButtonText: '确定',             callback: (action) => {                 console.log(action)             }         });     } ); export default service;

　　stores/store.js

?

1 2 3

import { createPinia } from 'pinia'; const pinia = createPinia(); export default pinia;

　　stores/index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import { defineStore } from 'pinia'; import { ref, computed, reactive } from 'vue';   export const useSystemDataStore = defineStore('systemdata', () => {     const baseDomain = ref("http://localhost:8080/");     const apiDomain = ref("http://localhost:29611/");     const title = ref("ite title");     const description = ref("site description");     const current_user = reactive({ username: "jay", role: "admin", mobile: "15221098952", articles: [] });     //getters     const username = computed(() => current_user.username);     const mobile = computed(() => current_user.mobile);     const articles = computed(() => current_user.articles);     //即 actions 和 methods     function readArticles(artName) {         current_user.articles.push(artName);     }     return { baseDomain,apiDomain,title, description, current_user, username, mobile, articles, readArticles }; });

　　util/cookie.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

export const setCookie = (cname, cvalue, exdays) => {     var d = new Date();     d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));     var expires = "expires=" + d.toGMTString();     document.cookie = cname + "=" + cvalue + "; " + expires; } export const getCookie = (cname) => {     var name = cname + "=";     var ca = document.cookie.split(';');     for (var i = 0; i < ca.length; i++) {         var c = ca[i].trim();         if (c.indexOf(name) == 0) return c.substring(name.length, c.length);     }     return null; } export const removeCookie = (cname) => {     this.setCookie(cname, '', -1); }