后台管理系统实战项目-05 使用axios解决跨域问题

在Vue3项目中，前端调用后端接口的时候，因为域名端口不一样，会造成有跨域问题。

使用axios可以完美解决

1、安装axios

pnpm i axios --save

2、修改配置文件

在vite.config.ts文件中添加以下配置

server:{
    port:3000,
    open:true,
    proxy:{
      '/api':{
        target:'https://localhost:7255/api',
        changeOrigin:true,//是否使用代理
        secure:false,//忽略https请求之时的证书验证
        rewrite:(path)=>path.replace(/^\/api/,''),
        
      }
    }

3、添加http请求共用方法

import axios from "axios"
import instance from "./filters"
const http="/api"
export const getToken=(username:string,password:string)=>{

    return instance.get(`${http}/Login/GetToken?username=${username}&password=${password}&role=manager`)
}

4、添加请求过滤器

import axios from "axios";
import { ElMessage } from "element-plus";


const instance = axios.create({
    headers: {
        'content-type': 'application.json',
    },
    withCredentials: true,
    timeout: 50000 //50秒
})

instance.interceptors.response.use(
    response => {
        if (response.data.isSuccess) {
            return response.data.result
        } else {
            ElMessage.error(response.data.message)
           console.log(response.data)
        }
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    ElMessage.warning("资源没有访问权限");
                    break;
                case 404:
                    ElMessage.warning("接口不存在，请检查接口地址是否正确");
                    break;
                case 500:
                    ElMessage.warning("内部服务器错误，请联系系统管理员")
                    break;
                default:
                    return""
            }
        }
    }
)

export default instance;

5、使用

const token = await getToken(loginForm.username, loginForm.password)