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跨域並渲染問題解決