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

一、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)
  })
})

二、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