常规方法中,在config>index.js中配置proxyTable的axios跨域代理请求,可以实现数据跨域请求。
但是,当服务器做了host或者referer的限制,上述方法就会请求失败。
当浏览器向Web服务器发送请求的时候,一般会带上referer和host,他们都是header的一部分,服务器可以基于这两个参数获得一些信息,当然服务器可以检查请求来源页面的host和referer,并做相应的限制。
而我们可以模拟http请求中host和referer,伪造参数骗过Web服务器对请求的限制。
因为在Vue2.0中取消了dev-server.js这个文件,所以需要在build>webpack.dev.conf.js文件下配置:
1、现在文件头部引入相关依赖
const express = require('express')
const app = express()
const axios = require('axios')
const apiRouters = express.Router()
app.use('/api', apiRouters)
2、找到devServer,并在其中配置代理接口
before(app) {
app.get('/api', function (req, res) {
let url = '目标地址'
axios.get(url, {
headers: {
referer: '目标referer',
host: '目标host'
},
params: req.query//请求参数
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
}
3、调用代理接口
export function getDiscList() {
const url = '/api'
const data = Object.assign({}, commonParams, {
//请求参数
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}