axios跨域
配置config->index.js中的proxyTable,内容如下:
proxyTable: { // 跨域请求 '/api': { target:'http://www.webdomain.com', // 你请求的第三方接口 changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite:{ // 路径重写, '^/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)
})
}