vue + axios 解决跨域问题

vue + axios 解决跨域问题

项目开发过程中遇到了使用axios请求后台接口跨域的问题，网上搜了几种方案都没有解决，最后通过配代理的方式解决了，代码如下：

报错：
首先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配置文件（或是在src文件夹同级新建vue.config.js文件）

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {     //axios跨域处理
      '/api': {       //此处并非和url一致 任意取 但要与 Vue.prototype.HOME 的值一样
        target:'http://192.168.2.80:8081/', // 你的数据连接
        changeOrigin:true, //允许跨域  关键
        pathRewrite:{
          '^/api': ''
        }
      }
    }
  }
}

最后就是在需要跨域的文件中操作请求数据即可跨域成功了：

    created() {
      this.getData()
    },
    methods:{
    	getData(){
			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里面的文件，请千万要重新启动项目，重新启动项目，重新启动项目，不然一定会报错。

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