vue-cli axios跨域 + 反向代理模擬http請求host+referer

axios跨域

配置config->index.js中的proxyTable，內容以下：

proxyTable: { // 跨域請求
      '/api': { // 注意此處可設置爲 '*' 表明不限制於某個接口，target下的全部接口均可以訪問
        target:'http://www.webdomain.com', // 你請求的第三方接口
        changeOrigin:true, // 在本地會建立一個虛擬服務端，而後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
        pathRewrite:{  // 路徑重寫， '/api' 改成 '*'後此處要刪除
          '^/api': '/api'  // 替換target中的請求地址，也就是說之後你在請求 http://www.webdomain.com/dataxxx 這個地址的時候直接寫成/api便可。
        }
      }
},

單個數據請求 - 反向代理模擬HTTP請求 host + referer

1、webpack v3.6.0以前

故若是想拿到該接口數據能夠進行僞造訪問來路，不過這是一種欺騙服務器的手段，筆者並不提倡，僅供學習參考！ 
在老一點版本的vue2.0 配置下，build目錄下有提供了dev-server 和 dev-client的配置，仿造refer配置以下:

build -> dev-server.js 引入相關依賴

var app = express()
var apiRoutes = express.Router()

在指定位置配置代理接口

var apiRoutes = express.Router()

/**
 *  @parameter '/getDataList' 本地代理接口，也就是說之後你在請求
 *   http://www.webdomain.com/dataxxx 這個地址的時候直接寫成/getDataList便可
 *
 * */
apiRoutes.get('/getDataList', function (req, res) {
  var url = 'http://www.webdomain.cn/apidata' // 請求的數據接口
  axios.get(url, {
    headers: {
      referer: 'http://www.webdomain.cn',
      host: 'www.webdomain.cn'
    },
    params: req.query
  }).then((response) => {
    res.json(response.data)
  }).catch((e) => {
    console.log(e)
  })
})

2、webpack v3.6.0以後

webpack升級到了v3.6.0，裏邊去掉了dev-server和dev-client兩個文件。 如今再對接口的設置不能再在dev-server配置了，而改在webpack.dev.conf.js裏進行配置。該接口配置以下：

build > webpack.dev.conf.js 引入相關依賴

var express = require('express')
var axios = require('axios')
var app = express()
var apiRoutes = express.Router()

app.use('/api', apiRoutes);

在指定位置配置代理接口

devServer: {
    before(apiRoutes){ // 添加before
      apiRoutes.get('/getDataList',(req,res)=>{
        let url = 'http://www.webdomain.cn/apidata'
        axios.get(url, {
          headers: {
            referer: 'http://www.webdomain.cn/',
            host: 'www.webdomain'
          },
          params: req.query  //這是請求的query
        }).then((response) => {
          //response是api地址返回的，數據在data裏。
          res.json(response.data)
        }).catch((e) => {
          console.log(e);
        })
      });
    },  
  },

 調用代理接口

/* 獲取用戶session數據 */
export function getUserSession () {
  const url = `${WEB_DOMAIN}/users/info`
  const datas = Object.assign({}, {})

  return axios.get(url, {
    params: datas
  }).then(res => {
    return Promise.resolve(res, datas)
  })

}

 注意：第二種方法想實現多個接口跨域訪問就要配置多個 apiRouters.get() 方法，第一種能夠把 '/api' 改成 '*' 表明能夠訪問 target域名下的全部Api