创建一个展示B站视频的网站

项目已上线

网站：hoyoer.llds.me

Github: github

技术栈：VueJS + HonoJS + Cloudflare Workers + Cloudflare D1

想法

把喜欢的视频放到网站上展示，具体要有以下功能：

• 分类
• 搜索（关键词）
• 视频展示（封面、标题、UP主）
• 视频数据（播放量、弹幕量、点赞量、投币量、收藏量）
• 跳转到原视频功能

实现

视频数据的获取找到了两种方式：

• 通过B站开放平台
  获取（没看懂如何传参,验证授权什么的）
• 通过开源项目bilibili-API-collect
  获取

我用的第二种方式（不知道为什么，也不需要传验证授权的字段也可以获取数据）：

async function getBvData(bvid: string) {
  const url = new URL('https://api.bilibili.com/x/web-interface/view/detail')
  url.searchParams.set('bvid', bvid)
  url.searchParams.set('need_elec', '1')
  const response = await fetch(url.toString())
  const data: any = await response.json()
}

到这步,我以为不需要写什么接口了，以为直接在前端调用这个函数就可以展示了，接着就出现了第一个问题：跨域。如果是我们自己写的后端接口，跨域的话，可以在后端直接设置允许跨域，如 Hono: app.use('*', cors()),但是这个B站的官方接口，只能用Cloudflare Workers代理下。

尝试用 Cloudflare Workers 代理B站的请求，出现第二个问题：触发B站防爬机制，chatgpt解释说B站可能会检测到你使用的是 Cloudflare 的 IP 地址，进而触发其防爬机制。

只能在本地请求数据，生成数据文件给前端页面调用。

最后，D1 维护视频BV号表数据，在本地调用BV号接口生成视频数据文件，再在前端调用数据文件展示视频信息。