vue2.0下axios跨域

2019-2-28 hubo Web前端

1.安装axios,并配置相应文件:

npm install axios --save


2.在 src/main.js 中如下声明使用:

import axios from 'axios';

Vue.prototype.$axios=axios;


3.在 config/index.js 中的 的dev 添加以下代码,设置一下proxyTable

'/api': {
               target : 'http://guoxue365.cn',    //设置你调用的接口域名和端口号.别忘了加http 
               changeOrigin : true,   //允许跨域
               pathRewrite : { 
                    '^/api':
                   // '/'这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替。比如我要调用'http://guoxue365.cn/api/video/list',直接写‘/api/video/list’即可
 
                }
          }

    },


4.在.vue文件中使用

<script>
  import axios from 'axios';
export default {
  name: 'hello',
  data () {
    return {
      msg: '调用api',
      movieArr : []
    }
  },
  methods:{
    sayOut () {

      this.$axios.get('/api/video/list)

        .then((response) => {
          console.log(response)
          console.log(response.data.subjects)
          this.movieArr = response.data.subjects
        })
    }
  }
}
</script>


网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2024 www.elight.cn, All Rights Reserved