Vue+webpack项目中实现跨域的http请求

目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护， 而axios是官方推荐的且npm下载量已经170多万，github的Star已经接近4.5万, 再看看vue-resource

 但是作为学习笔记，在学习axios的同时也会对比vue-resource的用法。

先看看同域请求

<div class="container">
    <h1>vue request</h1>
    <button @click="getJson">GET请求</button>
 </div>

methods: {
      getJson() {
        this.$http.get('/static/api/city.json', {
          params: {
            userId: '111'
          },
          headers: {
            'token': 'mitu'
          }
        }).then((res) => {
          console.log(res)
        }, (err) => {
          console.log(err)
        })
      },
}

请求结果 ：

这是vue-resource的get请求方法， city.json存在于同域下的static目录, 注意，首先必须先安装 npm install -S vue-resource 然后在入口文件main.js中注册vue-resource

同理 axios的get请求如下 ： 

import axios from 'axios'
methods: {
      getJson() {
        axios.get('/static/api/city.json').then((res) => {
          console.log(res)
        }).catch((err) => {
          console.log(err)
        })
      }
}

区别在于 ,

1 .axios无需在main.js中注册，但需要在组件内部引入 import axios from 'axios'

2. vue-resource是绑定到vue实例中，所以调用时应该是 this.$http.get(), 而axios是独立的插件， 调用应该是 axios.get()

跨域请求 ：

如直接把 

axios.get('/static/api/city.json') 改成请求其他外部域的api如: 

axios.get('https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
返回结果如下 : 

注意到有 No 'Access-Control-Allow-Origin' header, 表示浏览器端限制了跨域的请求。 

解决的思路是，先让服务端通过跨域请求，然后客户端（浏览器）再向服务端请求数据，在此服务端起到一个代理的作用 。

1. 找到项目配置文件 config/index.js ,将proxyTable添加以下代码 ：

proxyTable: {
      '/api': {
        target: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
},

'/api'是供客户端请求的接口 可自定义, 以上两个'/api'必须是一致的。表示客户端请求以 '/api'开头的目标都指向target

target: url  ------ 是请求的外域目标api

changeOrigin ----- ture表示开启跨域请求

pathRewrite ---- 对目标资源重定向，可为空值

 methods: {
   getJson() {
     axios.get('/api').then((res) => {
      console.log(res)
     }).catch((err) => {
      console.log(err)
     })
   },
}

 请求数据成功!