vue项目开发遇到的问题:如何改变请求的host以及referer抓取做了host以及referer限制的接口数据
来源:互联网 发布:软件测试是什么意思 编辑:程序博客网 时间:2024/05/16 15:51
最近在做一个抓取qq音乐接口数据的音乐App,使用vue开发,数据都从qq音乐中抓取,开发过程中遇到一个问题,比如以下接口:
https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8¬ice=0&format=jsonp&platform=yqq&hostUin=0&sin=0&ein=29&sortId=5&needNewCode=0&categoryId=10000000&rnd=0.10249614437651289在qq音乐官网中可以查看到此为一个jsonp接口,理应通过jsonp跨域就可以获取到数据。但本人在开发时发现,发送jsonp请求会报500错误!
为什么一个jsonp请求却会报500错误呢?原因如图:
解释:qq音乐做了host和referer的校验,即该请求是在qq音乐该页面下发送的才会成功!!
我第一时间想到的解决方法是配置proxyTable代理,后来才想起来config文件夹下index.js中的proxyTable只是用于解决跨域问题,但这次的不只是跨域问题,而是跨域+host以及referer的限制!如果只是跨域问题,那么jsonp就足以解决!从纯前端的角度,我们是无法修改host和referer的,起码我知道的方法没有,那么我们应该如何改变host和referer?
亲测可用的解决办法:axios+devServer配置。
完整代码:
vue层methods:
api层封装方法:
跨域解决以及referer和host的修改
安装好axios后,在build文件夹下的webpack.dev.conf.js中的devServer中加上做一下配置:
至此,以上vue中methos请求的接口已经能成功返回数据,qq音乐做了限制的接口数据就这样被我们抓取到了,运行结果如下:
阅读全文
0 0
- vue项目开发遇到的问题:如何改变请求的host以及referer抓取做了host以及referer限制的接口数据
- http请求的referer属性
- http请求的referer属性
- 关于referer的获取问题
- ASP如何利用XMLHTTP实现表单的提交以及cookies或session的发送和Referer
- HTTP Referer 的故事
- 关于request.getHeader("Referer")的问题
- 项目开发遇到的问题以及解决方法
- can't resolve host-使用GIT 请求远程仓库时出现的问题以及解决办法
- 关于今天做项目时遇到的问题 以及解决办法
- request.getHeader("referer")的作用
- request.getHeader("referer")的作用
- request.getHeader("referer")的作用 .
- request.getHeader(referer)的使用
- request.getHeader("Referer");的使用
- request.getHeader("referer")的作用
- request.getHeader("referer")的作用
- request.getHeader("referer")的作用
- 句柄
- vscode 1.19.0安装找不到git路径解决
- 读取,编辑和执行文件
- 设计模式学习(三)
- 第一篇博文,记录自己的研究生学习历程
- vue项目开发遇到的问题:如何改变请求的host以及referer抓取做了host以及referer限制的接口数据
- Java 使用注解检验手机号
- Linux下内存的使用率正确的算法
- 一千个不用 Null 的理由
- 线程异常
- Emgu.CV.CvInvoke的类型初始值设定项引发异常--解决办法
- 【UWP开发】uwp如何在win10和xbox one本地保存存档
- 自定义协议从浏览器中启动本地应用程序
- a 链接的 download 属性实操