axios跨域处理

1使用npm安装axios插件

npm install axios

2config目录下 index.js文件

 proxyTable: {
      '/douban_api': {
        target: 'http://api.douban.com',  //目标接口域名
        pathRewrite: {
          '^/douban_api': ''   //重写接口
        },
        changeOrigin: true,  //是否跨域
      },

    },

3main.js

import  Axios from  'axios'

Vue.prototype.$axios=Axios
Vue.prototype.HOST="/douban_api"

4components下 HelloWorld.vue组件

<script>
export default {

  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    const  url=this.HOST+"/v2/movie/top250";
    this.$axios.get(url)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

}
</script>

图片.png
测试接口地址:http://api.douban.com/v2/movie/top250
目录结构:
图片.png

参考:https://www.bilibili.com/video/av35606159/?p=21