vite 配置axios跨域以及不生效问题

1. 在vite.config中添加配置

//关闭eslint
lintOnSave: false,
server:{
    host:"localhost",//代理人地址
    open:true,//是否打开
    port: 8080,// 重点，通过代理转发到8080,可以不配置
    proxy:{//代理信息（转发信息）
        // 这里的dev-api可乱写, 是拼接在url后面的地址 如果接口中没有统一的后缀可自定义
       // 如果有统一后缀, 如api, 直接写api即可, 也不用rewrite了
        ["/dev-api"]:{//暗号 一致会被拦截，不一致就不会被拦截
            target:'http://192.168.1.11',//真实地址 表示要代理到哪里去（后端端口号）
            ws: false,        //如果要代理 websockets，配置这个参数
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin:true,//地址替换
            rewrite: (path) => path.replace(/^\/dev-api/, ""),//消除作案痕迹 将dev-api替换为空
        }
    }
  }

2. 在.env.development中配置开发环境下的基地址(没有该文件夹手动新建

VUE_APP_BASE_API='/dev-api'

3. 配置axios的基地址

const instancs = axios.create({
baseURL:  "/dev-api", // api的base_url 
//baseUrl: import.meta.env.VUE_APP_BASE_API 也可以直接写

});

4.在utils/request.js

import axios from 'axios';

const TIMEOUT = 10000; // 默认超时时间为10秒

// 创建一个axios实例
const instance = axios.create({
  baseURL:  "/dev-api", // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写
  timeout: TIMEOUT, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      // 设置请求头token
      config.headers.Authorization =  token;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // // 对响应数据做点什么
    // if(response.config.url =="/authentication/login"){
    //   if(response.headers.token != undefined){
    //     localStorage.setItem('token',response.headers.token);
    //   }
    // }
    //登录是否过期
    if(response.data.code ==401){
      localStorage.removeItem('token');
      //全局登录状态
      this.$store.commit('logout');
    }
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // token过期或未登
          localStorage.removeItem('token');
          this.$store.commit('logout');
          break;
        case 404:
          // 资源不存在
          break;
        default:
          break;
      }
    }
    return Promise.reject(error);
  }
);

export default {
  get(url, params = {}, timeout = TIMEOUT) {
    return instance.get(url, {
      params,
      timeout
    });
  },
  post(url, data = {}, timeout = TIMEOUT) {
    return instance.post(url, data, {
      timeout
    });
  },
  put(url, data = {}, timeout = TIMEOUT) {
    return instance.put(url, data, {
      timeout
    });
  },
  delete(url, params = {}, timeout = TIMEOUT) {
    return instance.delete(url, {
      params,
      timeout
    });
  }
};

5.在apis/xxx.js

import request from "@/utils/request";

//用户登录
export const userLogin = (username,password) =>{
    return request.get(`/admin/login?adminName=${username}&password=${password}`);
}