美文网首页
axios处理跨域问题

axios处理跨域问题

作者: liutianou | 来源:发表于2018-09-20 17:54 被阅读0次

首先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里面的文件,请千万要重新启动项目,重新启动项目,重新启动项目,不然一定会报错。

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

相关文章

网友评论

      本文标题:axios处理跨域问题

      本文链接:https://www.haomeiwen.com/subject/nuvnnftx.html