Vue项目中jsonp跨域获取qq音乐首页推荐：踩坑指南
2023-09-06 23:20:52
前言
在开发Vue项目的过程中，我们经常会遇到跨域的问题。跨域是指浏览器出于安全考虑，限制了不同源的脚本之间的通信。如果您的Vue项目需要从另一个域名的服务器获取数据，就会遇到跨域问题。
为了解决跨域问题，可以使用jsonp技术。JSONP（JSON with Padding）是一种允许不同源的脚本之间进行通信的技术。它利用<script>标签的无域限制特性，将数据封装在函数调用中，并在函数中处理返回的数据。
实现步骤
1. 安装JSONP库
首先，我们需要在Vue项目中安装jsonp库。您可以使用npm或yarn来安装它：
npm install jsonp --save
或者
yarn add jsonp
2. 封装jsonp请求
安装好jsonp库之后，就可以开始封装jsonp请求了。我们可以创建一个名为jsonp.js的文件，并将其放在项目的src目录中。在jsonp.js文件中，我们可以编写以下代码：
import jsonp from 'jsonp'
export default function jsonpRequest(url, data, callback) {
return new Promise((resolve, reject) => {
jsonp(url, data, {
param: 'callback',
prefix: 'jsonp',
timeout: 10000
}, (err, data) => {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
在上面的代码中，我们使用jsonp库创建了一个jsonp请求函数jsonpRequest()。这个函数接受三个参数：url、data和callback。url是请求的URL，data是请求的数据，callback是回调函数，用于处理返回的数据。
3. 在Vue组件中使用jsonp请求
封装好jsonp请求之后，我们就可以在Vue组件中使用它了。以下是一个示例：
<template>
<div>
<button @click="getQQMusicData">获取QQ音乐数据</button>
</div>
</template>
<script>
import jsonpRequest from '../utils/jsonp'
export default {
methods: {
getQQMusicData() {
jsonpRequest('https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg', {
platform: 'h5',
page: '1',
hostUin: '0',
sin: '0',
ein: '29',
categoryId: '10000000',
sortId: '5',
needNewCode: '0',
rnd: Math.random()
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
}
</script>
在上面的代码中，我们在<template>中添加了一个按钮，用于触发getQQMusicData()方法。在getQQMusicData()方法中，我们使用jsonpRequest()函数发送了一个jsonp请求到QQ音乐的服务器，并使用then()和catch()方法来处理返回的数据。
遇到的问题
在实现此功能时，我遇到了一些问题，并找到了相应的解决方案。以下是我遇到的问题和解决方案：
1. 跨域请求被浏览器阻止
当我在浏览器中运行Vue项目时，发现跨域请求被浏览器阻止了。这是因为浏览器出于安全考虑，限制了不同源的脚本之间的通信。为了解决这个问题，我需要在服务器端设置CORS（跨域资源共享）头。在Node.js中，可以使用以下代码来设置CORS头：
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
next()
})
2. JSONP请求没有返回数据
在解决跨域请求被浏览器阻止的问题后，我发现JSONP请求没有返回数据。这是因为QQ音乐的服务器没有正确处理jsonp请求。为了解决这个问题，我需要在QQ音乐的服务器端添加以下代码：
// 在响应中添加callback函数名
res.write(`${callback}(${JSON.stringify(data)})`)
3. JSONP请求超时
在解决JSONP请求没有返回数据的问题后，我发现JSONP请求超时了。这是因为QQ音乐的服务器响应速度比较慢。为了解决这个问题，我需要将JSONP请求的超时时间设置为一个较大的值。在jsonpRequest()函数中，我们可以将timeout参数设置为一个较大的值，例如：
jsonpRequest(url, data, callback, {
timeout: 30000
})
总结
通过以上步骤，我们就可以在Vue项目中使用jsonp跨域获取qq音乐首页推荐。在实现此功能时，可能会遇到一些问题，但这些问题都可以通过相应的解决方案来解决。希望本指南对您有所帮助。
