Vue axios解决跨域问题

1. 首先 vue init webpack axios初始化一个vue文件

2. 然后安装 npm i axios -S

3. 引入 axios 和 qs
   

   

   image.png

4. 修改config目录下的index.js文件

   
   
   

   image.png

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
 }
===>
//更改后
dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      "/api": {
        target: "http://api.douban.com/v2",  //需要访问的地址,以豆瓣为例
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
      }
    },

5.created()里发起请求

created() {
    let url = this.HOST + '/movie/top250';
    this.$axios.get(url, {
      params: {
        count: 10,
        start: 0
      }
    })
      .then(res => {
        console.log(res.data);
      })
      .catch(error => {
        console.log(error);
      })
  }

6.结果

image.png

具体请看代码:
https://github.com/ZYmooon/vuedemo-study/tree/master/axios

如果解决了你的问题,请麻烦给个star,谢谢