vue2.0--axios的跨域问题

鉴于这个问题，特地的提取了一个demo来进行截图说明。

一、根据官网的的安装流程安装vue-cli

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

　　踩坑说明

1、根据官网用 npm i -g vue-cli 会报错。报错原因不明，（谁若知道的望告知）
　　解决办法： cnpm i -g vue-cli 换成cnpm就可以了

2、 vue init webpack my-project 安装后就出现如下。一路按enter，在询问是否安装vue-router时，我选了Y，其余都选n。最后停在了一个输入文本的区域。这里要等很久（久到你以为程序出错了还是怎样。所以要放点耐心等）

 二、安装axios，并配置相应文件。这里跨域请求的接口来自豆瓣的api

　　安装 npm install axios --save

　　配置：

　　1、在 src/main.js 中如下声明使用

import axios from 'axios';

Vue.prototype.$axios=axios;

　　2、在 config/index.js 中的 的dev 添加以下代码，设置一下proxyTable

dev: { 

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

                }
          }
    }, 
}

　　3、在 config/dev.env.js 中设置以下代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',  //开发环境
  API_HOST:"/api/"
})

　　4、在 config/prod.env.js 中设置以下代码

module.exports = {
  NODE_ENV: '"production"',//生产环境
  API_HOST:'"http://api.douban.com"'
}

　　5、修改 src/components/HelloWorld.vue 文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="item in movieArr">
        <span>{{item.title}}</span>
      </li>
    </ul>
    <button @click="sayOut">渲染</button>
  </div>
</template>

<script>
  import axios from 'axios';
export default {
  name: 'hello',
  data () {
    return {
      msg: '调用豆瓣api',
      movieArr : []
    }
  },
  methods:{
    sayOut () {
      this.$axios.get('/api/v2/movie/top250')
        .then((response) => {
          console.log(response)
          console.log(response.data.subjects)

          this.movieArr = response.data.subjects
          // 这里要强调一下这个this 箭头函数指的是它的父级也就是vue实例  然后不用箭头函数的话 this是一个undefined 无法.movieArr来给他赋值  这里要注意一下 我被坑了半天 希望小伙伴不要被坑
        })
    }
  }
}
</script>

　嗯，到这，就大功告成了

　

参考博客vue2.0 axios跨域并渲染问题解决