通過設置代理解決Vue中的跨域問題

1.問題：

在vue中，在使用Axios獲取數據時，有時會出現數據無法訪問的情形(即跨域問題)，如例1所示：

例1：在本地使用 Axios 來獲取豆瓣上的數據

this.$axios({
      method: 'get',                                  //以 get 方式獲取數據
      url: 'http://api.douban.com/v2/movie/top250'    //此處爲豆瓣上的數據
    }).then(res => {
      console.log(res)                                //成功則返回請求的結果
    }).catch(err => {
      console.log(err)                                //失敗則返回錯誤信息
    })

此時運行項目，在控制檯中會得到如下提示信息：即是存在 跨域 問題

2.解決方法：

打開vue項目文件夾下的build目錄，打開webpack.dev.conf.js：

選中 proxy 選項 ( 大概在第41行的位置 )，然後再打開 config/index.js 文件

在 proxyTable: { } 中設置跨域請求即可

第一步：設置proxyTable:

proxyTable: {
        '/douban_api':{       
            target: 'http://api.douban.com',
            pathRewrite: {
                '^/douban_api': ''
            },
            changeOrigin: true
        }
    },

第二步：在main.js中進行下一步的設置：

Vue.prototype.HOST = '/douban_api'

第三步：更改組件中數據的請求參數：

    let url = this.HOST + '/v2/movie/top250'        //進行地址的拼接
    this.$axios({
      method: 'get',
      url: url
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

第四步：打開瀏覽器，在控制檯即可看到正確的輸出結果

此時跨域問題成功解決