webpack-dev-conf.js作後端接口代理

使用jsonp去抓取數據的時候，數據的接口有host和referer的顯示，咱們的api請求被拒絕（500錯誤），必需要修改header，可是前端不能直接修改request header，咱們採起後端接口代理的方法去解決使用express，這樣前端去請求接口的時候不是直接請求服務器的url，而是請求咱們本身的server端，讓local server再去請求QQ服務端

使用express啓動代理服務器

原理：在封裝的請求數據函數getDiscList中不是直接請求url，而是請求express服務器端地址，再讓咱們的local server去請求服務端，使用nodejs請求服務器端，用到一個axios庫，在瀏覽器端發送的是xmlhttprequest請求，在nodejs中發送的是http請求。

axios請求服務器，在webpack-dev-conf.js中作以下配置

const express = require('express')
const axios = require('axios')
const app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
在devServer{}中添加

before(app) {

app.get('/api/getDiscList', (req, res) => {
    var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query // 經過req從瀏覽器端發過來的一堆參數(platform，sin，ein等)透傳給qq的服務端
    }).then((response)=>{ // qq服務端的響應數據，再經過res將響應數據輸出到瀏覽器端
      res.json(response.data)
    }).catch((error)=>{
      console.log(error)
    })
  })
}

以後，回到recommend.js中獲取數據，請求的是本地express服務器的api數據（ajax請求），（本地express的數據是上邊經過axios得到的）不是Jsonp數據了，返回的是axios的數據

export function getDiscList() {
  //調用這個方法時請求url時請求的不是QQ服務端，而是本身的server端，請求的是請求express服務器端地     址'/api/getDiscList'
  //而，咱們去請求api時，在webpack.dev.conf.js中，讓local server再去請求QQ服務端
  //這樣作的結果就是，不是前端直接去請求QQ服務端，而是經過中介本身的local server去請求QQ服務端
  
  // const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  const url = '/api/getDiscList' //此時這個url並非咱們一般意義上的接口而是express服務器端地址
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json' // 使用的時axios,因此format使用的是json,不是jsonp
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

總結整個過程

• 在用jsonp請求QQ接口的時候，因爲host和referer是QQ服務端本身的，咱們的請求會出現500錯誤
• 使用代理服務端的方法接口上面的問題
• 代理服務端的原理是：

1. 在webpack-dev-conf.js中給express服務器一個請求express服務器端地址‘/api/getDiscList’，這樣前端請求的時候不用去請求真正的qq接口，而是去請求express服務器，當前端去發送一個請求express服務器端地址【/api/getDiscList】時，本地的local server就去請求相應的真正的qq接口【https://c.y.qq.com/splcloud/f...】。
2. 在webpack-dev-conf.js進行配置，經過req從瀏覽器端發過來的一堆參數(platform，sin，ein等)透傳給qq的服務端，經過axios請求QQ服務端，當請求響應的時候， qq服務端的響應數據，再經過res將響應數據輸出到瀏覽器端。
3. recommend.js中獲取數據，請求的是本地express服務器的api數據（ajax請求），（本地express的數據是上邊經過axios得到的）不是Jsonp數據了，返回的是axios的數據