通过设置代理解决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)
    })

第四步：打开浏览器，在控制台即可看到正确的输出结果

此时跨域问题成功解决