在vue中通过proxy代理拦截解决跨域

1、首先安装axios

npm install --save axios vue-axios

2、在src下新建文件夹http，在http中新建文件index.js，复制下面代码

import axios from "axios";

const http = axios.create({
    baseURL: '根路径',
})

export default http

 3、在main.js中导入

import http from './http/index.js' //导入axios

Vue.config.productionTip = false
Vue.prototype.$http = http //使用axios

4、使用axios

    methods: {
        async getData() {
            let res = await this.axios.get('/路径')
            console.log(res);
        }
    }

出现跨域，会报错

5、在根路径下新建文件 vue.config.js 复制下面代码

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '', // 需要跨域的目标网址
                changeOrigin: true,
                pathRewrite: { //路径重写
                    '^/api': ''
                }
            }
        }
    }
}

6、在src/http/index.js中的路径进行修改

import axios from "axios";

const http = axios.create({
    baseURL: '/api',
})

export default http

7、控制台重新启动 npm run serve

完成！！！