Vue实例--音乐播放器：歌单数据接口分析

2024-05-12 15:20:04

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据发现根本获取不到

原因是qq音乐在请求头里面加了authority和refer等但是如果我们通过jsonp实现跨域来请求数据的话是根本不能够修改请求头的所以我们就考虑用axios 但是axios又不能进行跨域那么我们要怎么拿到qq音乐的服务器的数据呢？？其实是有办法解决的：我们可以进行后端接口代理那么什么是后端代理呢？？

如果要使用axios直接进行跨域访问是不可以的，这是就需要配置代理了，为什么要配置代理呢？

原因就是客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。

如果不理解可以看依据看下图

接下来手动代理后端服务器

在手动代理后端服务器完毕之后就来写前端请求

成功拿到数据

有一点要注意：axios并不是vue的插件所以我们不能直接使用use方法所以我们要将他添加到vue的原型链中使用

import axios from 'axios';

Vue.prototype.$http = axios;

这样我们就可以直接使用了，

注意点：1.webpack的跨域解决方法只是是适合在开发环境中使用，

　　　　2.设置inde.js内部的dev时，请注意，需要设置的应该是域名，过多会失效，所以应该是www。baidu。com

　　　　3.使用axios上传文件，不需要像ajax上传图片一样使用formdata

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据发现根本获取不到

原因是qq音乐在请求头里面加了authority和refer等但是如果我们通过jsonp实现跨域来请求数据的话是根本不能够修改请求头的所以我们就考虑用axios 但是axios又不能进行跨域那么我们要怎么拿到qq音乐的服务器的数据呢？？其实是有办法解决的：我们可以进行后端接口代理那么什么是后端代理呢？？

如果要使用axios直接进行跨域访问是不可以的，这是就需要配置代理了，为什么要配置代理呢？

原因就是客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。

如果不理解可以看依据看下图

接下来手动代理后端服务器

在手动代理后端服务器完毕之后就来写前端请求

成功拿到数据

有一点要注意：axios并不是vue的插件所以我们不能直接使用use方法所以我们要将他添加到vue的原型链中使用

import axios from 'axios';

Vue.prototype.$http = axios;

这样我们就可以直接使用了，

注意点：1.webpack的跨域解决方法只是是适合在开发环境中使用，

　　　　2.设置inde.js内部的dev时，请注意，需要设置的应该是域名，过多会失效，所以应该是www。baidu。com

　　　　3.使用axios上传文件，不需要像ajax上传图片一样使用formdata

Vue实例--音乐播放器：歌单数据接口分析相关推荐

vue引入音乐播放器插件
欢迎大家进群,一起探讨学习微信公众号,每天给大家提供技术干货博主技术笔记博主网站地址1 博主网站地址2 博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star vue引入音乐播放器插件 ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue.js音乐播放器设计与实现源码+mysql数据库+系统+lw文档+部署 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
Java和vue实现音乐播放器_vue实现的网易云音乐在线播放和下载功能案例
本文实例讲述了vue实现的网易云音乐在线播放和下载功能.分享给大家供大家参考,具体如下: 效果如图: 完整代码: Document html, body { height: 100%; padding ...
Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
vue相关音乐播放器
1.初始化vue,vue-cli,webpack: $ vue init webpack vue-music ? Project name (vue-music) ? Project descript ...
vue实现音乐播放器
通过vue与原生js实现音乐播放器下面是需要的网址 1.歌曲搜索接口请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keyw ...
基于VUE的音乐播放器
文章目录前言一.功能分解 1.布局 2.JS功能实现二.例程下载 1.引入库 2.读入数据总结前言 html音乐播放器练习小例子 1.调用网易云的api查询歌曲信息,api不是官方的,而是g ...

最新文章

热门文章