当使用跨域jsonp接口时。referer属性是前台接口告诉服务器该接口的域名,而后台可以对应设置请求头referer从而对接口进行限制访问。
比如qq音乐的一个jsonp数据接口
https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg
其后台接口对referer和host的设置如下
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
如果访问的接口不是来自c.yy.com下的话。则会报错如下
故如果想拿到该接口数据可以进行伪造访问来路,不过这是一种欺骗服务器的手段,笔者并不提倡,仅供学习参考!
在老一点版本的vue2.0 配置下,config目录下有提供了dev-server 和 dev-client的配置,仿造refer配置如下
引入包
var app = express()
var apiRoutes = express.Router()
配置
apiRoutes.get('/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/', //源域名
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
app.use('/api', apiRoutes)
vue-cli升级到2.9.1之后,把webpack升级到了v3.6.0,里边去掉了dev-server和dev-client两个文件。 现在再对接口的设置不能再在dev-server配置了,而改在webpack.dev.conf.js里进行配置。该接口配置如下:
引入包
var express = require('express')
var axios = require('axios')
var app = express()
var apiRoutes = express.Router()
配置
devServer: {
//添加一个before方法
before(apiRoutes){
apiRoutes.get('/api/getDiscList',(req,res)=>{
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query //这是请求的query
}).then((response) => {
//response是api地址返回的,数据在data里。
res.json(response.data)
}).catch((e) => {
console.log(e);
})
});
app.use('/api', apiRoutes);
},
},