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