axios跨域配置

1. 创建一个vue.config.js 文件,写入以下配置

【main.js】
import Vue from 'vue'
import App from './App.vue'
// step1：引入 axios
import Axios from 'axios'

Vue.config.productionTip = false

// step2：把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求,
// 不需要每次都 import一下 axios了，直接使用 $axios 即可
Vue.prototype.$axios = Axios

// step3：使每次请求都会带一个 /api 前缀 
Axios.defaults.baseURL = '/api'

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

const webpack = require('webpack');
module.exports = {
    configureWebpack: {
    devServer: {
        proxy: {
            '/api': {
                // 此处的写法，目的是为了 把上面  /api 替换成 http://127.0.0.1:3000/
                // 如果使用的是自己封装的请求函数 那么你应该这样写 baseURL: '',
                // 注意这里的 api 是必须的，因为是有代理的缘故
                target: 'http://127.0.0.1:3000/',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

这样配置就能访问跨域后的数据了