vue跨域

配置vue.config.js文件(根目录下)

const { defineConfig } = require('@vue/cli-service')
const path = require('path');

//定义路径重命名方法
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  //设置文件别名
  chainWebpack: (config) => {
    config.resolve.alias.set('@v', resolve('src/views')).set('@c',resolve('src/components')).set('@u','src/untils').set('@a',resolve('src/api'))
  },

  //配置跨域
  //相当于解析路径时，遇到/api就在api后面拼接http://localhost:3000
  //栗子：http://localhost:8080/api/admin/add就替换为http://localhost:8080/api/http://localhost:3000/admin/add
//路径重写之后就为http://localhost:8080/http://localhost:3000/admin/add
  devServer:{
    proxy:{
      "/api":{
        target:"http://localhost:3000",//服务器地址
        changeOrigin:true,//是否跨域
        pathRewrite:{//路径重写，vue2写法
          "^/api":''
        }
        //vue3路径重写
        //rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

封装axios时

//引入axios
import axios from 'axios';

//设置axios
const service=axios.create({
    timeout:1000*60,
    baseURL:'/api',//对axios发送的请求路径进行集中设置,对应跨域时设置的/api，这两个一定要相同。相当于在api接口路径前拼接了一个/api，用来匹配跨域时设置的/api
})

//封装post请求
let post=function(url,data_={}){
    return new Promise((resolve,reject)=>{
        service.post(url,data_).then((res)=>{
            return resolve(res)
        }).catch((err)=>{
            return reject(err)
        })
    })
}

//封装get请求
let get=function(url,params){
    return new Promise((resolve,reject)=>{
        service.get(url,{params}).then((res)=>{
            return resolve(res)
        }).catch((err)=>{
            return reject(err)
        })
    })
}

//请求拦截
service.interceptors.request.use(config=>{
    //添加请求头
    config.headers={
        "Authorization":localStorage.token
    }
    return config
},err=>{
    return Promise.reject(err)
})

//添加响应拦截
service.interceptors.response.use(res=>{
    return res.data
},err=>{
    return err
})

export default{
    post,
    get
}