vue项目开发遇到的问题:如何改变请求的host以及referer抓取做了host以及referer限制的接口数据
2017-12-19 10:59
1141 查看
最近在做一个抓取qq音乐接口数据的音乐App,使用vue开发,数据都从qq音乐中抓取,开发过程中遇到一个问题,比如以下接口:
为什么一个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音乐做了限制的接口数据就这样被我们抓取到了,运行结果如下:
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音乐做了限制的接口数据就这样被我们抓取到了,运行结果如下:
相关文章推荐
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- ionic+nodejs开发遇到的跨域和post请求数据问题
- vue项目中做编辑功能传递数据时遇到问题的解决方法
- Android 百度地图开发(一)如何调用百度地图接口和在项目中显示百度地图以及实现定位
- 在项目中遇到误删表中数据,如何恢复oracle数据库表中数据的恢复问题
- 抓取网页中的内容、如何解决乱码问题、如何解决登录问题以及对所采集的数据进行处理显示的过程
- [android开发]天气预报项目的开发之数据接口与网络请求-1
- HTTP接口不同项目网页之间数据交互跨域以及打开的窗口无法跳出关掉的问题
- vue 动态改变静态图片以及请求网络图片的问题
- webpack+vue开发项目时遇到报错如何定位错误
- Android的okhttp的post请求,php返回json数据。以及遇到的okhttp dispatcher问题,和json解析遇到的问题
- 详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
- WIN7下.Net开发遇到的又一问题:HTTP 错误 500.19 - Internal Server Error,无法访问请求的页面,因为该页的相关配置数据无效。
- 一个项目如何请求访问,另一个封装好的接口项目的数据
- vue如何从接口请求数据
- WIN7下.Net开发遇到的又一问题:HTTP 错误 500.19 - Internal Server Error,无法访问请求的页面,因为该页的相关配置数据无效。
- iOS开发工具-如何使用网络封包分析工具Charles,通过配置proxy对http、https、tcp、udp 等协议的请求响应过程交互信息进行分析、判断、解决我们移动开发中的遇到的各种实际问题。
- ionic+nodejs开发遇到的跨域和post请求数据问题
- 如何部署Android开发环境以及解决部署中遇到的问题
- 转载:ionic+nodejs开发遇到的跨域和post请求数据问题