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