纯前端解决开发环境下Vue项目的axios跨域问题

前端项目运行于localhost:8080

想要请求的接口是http://222.19.236.142:7070/info2

如果直接axios.get()，会遇见跨域问题

在开发环境中，我们可以通过配置代理的方式来解决

首先，在src/main.js下

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

然后，在项目根目录vue.config.js下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  devServer: {
    proxy: {
      '/api': {
        target: 'http://222.19.236.142:7070/', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  }
})

使用中

axios.get('/info2').then(res => console.log(res.data))