首先npm安装好axios，其次在main.js中引入：

import axios from 'axios'

Vue.prototype.$axios = axios //把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求
Vue.prototype.HOME = '/api' //重要在于这里，Vue.prototype.HOME = '/api'是一个定值，默认指向localhost，所有修改指向路径为'/api'，配置文件index.js定义的可跨域路径

第二步就是修改上述所说的config>index.js配置文件

module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { //axios跨域处理 '/api': { //此处并非和url一致 target:'http://192.168.2.80:8081/', changeOrigin:true, //允许跨域 pathRewrite:{ '^/api': '' } } }}....以下省略}

最后就是在需要跨域的文件中操作了：

created() { var url = this.HOME + '/index***ds/getFe***List'; //HOME变量为已挂载的可跨域域名，这里将其拼接完，成为一个完整路径 this.$axios({ //this代表vue对象，之前在入口文件中把axios挂载到了vue中，所以这里直接用this.$axios调用axios对象 method: 'post', url: url, data: {feedType: 1, page: 1, pagesize: 10} }).then(function (res) { console.log(res); }).catch(function (err) { console.log(err); }) },

这样就可以成功跨域，拿到后台返回的数据了。

需要注意的是：在Vue项目中如果我们修改了config里面的文件，请千万要重新启动项目，重新启动项目，重新启动项目，不然一定会报错。

当然，这只是在本地可以正常跨域访问接口，线上的话，还需要和后台协商处理

升级到 Vue3 后，会发现 Vue2 中存放配置的 config 文件夹没有了，大家不要慌张。可以在 package.json 文件的同级目录下创建 vue.config.js 文件。给出该文件的基础配置：

module.exports = { outputDir: 'dist', //build输出目录 assetsDir: 'assets', //静态资源目录（js, css, img） lintOnSave: false, //是否开启eslint devServer: { open: true, //是否自动弹出浏览器页面 host: "localhost", port: '8081', https: false, //是否使用https协议 hotOnly: false, //是否开启热更新 proxy: null, }}

Vue3 解决跨域，内容只有第二步配置代理 和 Vue2 不同，其他的一致。

devServer: { open: true, //是否自动弹出浏览器页面 host: "localhost", port: '8081', https: false, hotOnly: false, proxy: { '/api': { target: 'https://www.v2ex.com/api', //API服务器的地址 changeOrigin: true, pathRewrite: { '^/api': '' } } },}