vue-music (4) 对有refrere和host保护的数据的抓取
利用axios方法
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
1.axios.get()
axios.get('/user', {
params: {
ID: 12345
}
}).then((res) => {
return Promise.resolve(res.data);
}).catch((error) => {
console.log(error);
});
2.axios.post()
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then((res) => {
return Promise.resolve(res.data)
}).catch((error) => {
console.log(error);
});
3.执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}
));
Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable(即带有then方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态(指resolved/rejected/pending/settled);如果传入的value本身就是promise对象,则该对象作为Promise.resolve方法的返回值返回;否则以该值为成功状态返回promise对象
正向代理
正向代理 是一个位于客户端和原始服务器(origin server)之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并指定目标(原始服务器),然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。
正向代理的用途:
(1)访问原来无法访问的资源,如google
(2) 可以做缓存,加速访问资源
(3)对客户端访问授权,上网进行认证
(4)代理可以记录用户访问记录(上网行为管理),对外隐藏用户信息
反向代理
反向代理(Reverse Proxy)实际运行方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。
反向代理的作用:
(1)保证内网的安全,可以使用反向代理提供WAF功能,阻止web攻击 大型网站,通常将反向代理作为公网访问地址,Web服务器是内网。
(2)负载均衡,通过反向代理服务器来优化网站的负载
反向代理方法
1.在recommend.js中写请求函数
export function getDiscList () {
const url = '/api/getDiscList'
const data = Object.assign({}, {
platform: 'yqq', // 都是从QQ音乐请求中的真实数据
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json' // 返回json对象
})
return axios.get(url, { // 固定套路
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
2.在config / index.js 写反向代理配置
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 反向代理
proxyTable: {
'/api/getDiscList':{ // 确保设置的代理名 一致
target:'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg', // 链接地址
bypass:function(req,res,proxyOptions){
req.headers.referer='https://c.y.qq.com'; // 请求referer
req.headers.host='c.y.qq.com'; // 也可以不写,请求会自动发送host
},
pathRewrite:{
'^/api/getDiscList':''
}
},
// 以下代码不需要改动
host: '0.0.0.0',
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
...
}
3.在recommend.vue 中发送请求 获得数据
created(){
this._getDiscList()
},
methods: (){
_getDiscList () {
getDiscList().then((res) => {
if (res.code === ERR_OK) {
console.log(res.data) // 返回数据
}
})
},
...
}
另一种方法
在webpack.dev.conf.js 中设置
上一篇: Vue-cli 如何使用scss