[{"data":1,"prerenderedAt":346},["ShallowReactive",2],{"\u002Fblog\u002F2025\u002Fbilibili-site":3},{"id":4,"title":5,"body":6,"description":99,"extension":337,"meta":338,"navigation":341,"path":342,"seo":343,"stem":344,"__hash__":345},"blog\u002Fblog\u002F2025\u002Fbilibili-site.md","创建一个展示B站视频的网站",{"type":7,"value":8,"toc":332},"minimark",[9,13,17,28,36,39,42,45,64,67,70,90,93,303,315,322,325,328],[10,11,5],"h1",{"id":12},"创建一个展示b站视频的网站",[14,15,16],"h2",{"id":16},"项目已上线",[18,19,20,21],"p",{},"网站：",[22,23,27],"a",{"href":24,"rel":25},"https:\u002F\u002Fhoyoer.llds.me\u002F",[26],"nofollow","hoyoer.llds.me",[18,29,30,31],{},"Github: ",[22,32,35],{"href":33,"rel":34},"https:\u002F\u002Fgithub.com\u002Fllds66\u002Fhoyo-er",[26],"github",[18,37,38],{},"技术栈：VueJS + HonoJS + Cloudflare Workers + Cloudflare D1",[14,40,41],{"id":41},"想法",[18,43,44],{},"把喜欢的视频放到网站上展示，具体要有以下功能：",[46,47,48,52,55,58,61],"ul",{},[49,50,51],"li",{},"分类",[49,53,54],{},"搜索（关键词）",[49,56,57],{},"视频展示（封面、标题、UP主）",[49,59,60],{},"视频数据（播放量、弹幕量、点赞量、投币量、收藏量）",[49,62,63],{},"跳转到原视频功能",[14,65,66],{"id":66},"实现",[18,68,69],{},"视频数据的获取找到了两种方式：",[46,71,72,81],{},[49,73,74,75,80],{},"通过",[22,76,79],{"href":77,"rel":78},"https:\u002F\u002Fopen.bilibili.com\u002F",[26],"B站开放平台","获取（没看懂如何传参,验证授权什么的）",[49,82,83,84,89],{},"通过开源项目",[22,85,88],{"href":86,"rel":87},"https:\u002F\u002Fgithub.com\u002FSocialSisterYi\u002Fbilibili-API-collect\u002F",[26],"bilibili-API-collect","获取",[18,91,92],{},"我用的第二种方式（不知道为什么，也不需要传验证授权的字段也可以获取数据）：",[94,95,100],"pre",{"className":96,"code":97,"language":98,"meta":99,"style":99},"language-ts shiki shiki-themes vitesse-light vitesse-dark","async function getBvData(bvid: string) {\n  const url = new URL('https:\u002F\u002Fapi.bilibili.com\u002Fx\u002Fweb-interface\u002Fview\u002Fdetail')\n  url.searchParams.set('bvid', bvid)\n  url.searchParams.set('need_elec', '1')\n  const response = await fetch(url.toString())\n  const data: any = await response.json()\n}\n","ts","",[101,102,103,140,173,206,240,269,297],"code",{"__ignoreMap":99},[104,105,108,112,115,119,123,127,130,134,137],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"s5TCs","async",[104,113,114],{"class":110}," function",[104,116,118],{"class":117},"s_xSY"," getBvData",[104,120,122],{"class":121},"si6no","(",[104,124,126],{"class":125},"s9nN2","bvid",[104,128,129],{"class":121},": ",[104,131,133],{"class":132},"s_NWU","string",[104,135,136],{"class":121},")",[104,138,139],{"class":121}," {\n",[104,141,143,146,149,152,155,158,160,164,168,170],{"class":106,"line":142},2,[104,144,145],{"class":110},"  const ",[104,147,148],{"class":125},"url",[104,150,151],{"class":121}," =",[104,153,154],{"class":110}," new ",[104,156,157],{"class":117},"URL",[104,159,122],{"class":121},[104,161,163],{"class":162},"scnC2","'",[104,165,167],{"class":166},"spP0B","https:\u002F\u002Fapi.bilibili.com\u002Fx\u002Fweb-interface\u002Fview\u002Fdetail",[104,169,163],{"class":162},[104,171,172],{"class":121},")\n",[104,174,176,179,182,185,187,190,192,194,196,198,201,204],{"class":106,"line":175},3,[104,177,178],{"class":125},"  url",[104,180,181],{"class":121},".",[104,183,184],{"class":125},"searchParams",[104,186,181],{"class":121},[104,188,189],{"class":117},"set",[104,191,122],{"class":121},[104,193,163],{"class":162},[104,195,126],{"class":166},[104,197,163],{"class":162},[104,199,200],{"class":121},",",[104,202,203],{"class":125}," bvid",[104,205,172],{"class":121},[104,207,209,211,213,215,217,219,221,223,226,228,230,233,236,238],{"class":106,"line":208},4,[104,210,178],{"class":125},[104,212,181],{"class":121},[104,214,184],{"class":125},[104,216,181],{"class":121},[104,218,189],{"class":117},[104,220,122],{"class":121},[104,222,163],{"class":162},[104,224,225],{"class":166},"need_elec",[104,227,163],{"class":162},[104,229,200],{"class":121},[104,231,232],{"class":162}," '",[104,234,235],{"class":166},"1",[104,237,163],{"class":162},[104,239,172],{"class":121},[104,241,243,245,248,250,254,257,259,261,263,266],{"class":106,"line":242},5,[104,244,145],{"class":110},[104,246,247],{"class":125},"response",[104,249,151],{"class":121},[104,251,253],{"class":252},"sTPum"," await",[104,255,256],{"class":117}," fetch",[104,258,122],{"class":121},[104,260,148],{"class":125},[104,262,181],{"class":121},[104,264,265],{"class":117},"toString",[104,267,268],{"class":121},"())\n",[104,270,272,274,277,279,282,284,286,289,291,294],{"class":106,"line":271},6,[104,273,145],{"class":110},[104,275,276],{"class":125},"data",[104,278,129],{"class":121},[104,280,281],{"class":132},"any",[104,283,151],{"class":121},[104,285,253],{"class":252},[104,287,288],{"class":125}," response",[104,290,181],{"class":121},[104,292,293],{"class":117},"json",[104,295,296],{"class":121},"()\n",[104,298,300],{"class":106,"line":299},7,[104,301,302],{"class":121},"}\n",[18,304,305,306,310,311,314],{},"到这步,我以为不需要写什么接口了，以为直接在前端调用这个函数就可以展示了，接着就出现了第一个问题：",[307,308,309],"strong",{},"跨域","。如果是我们自己写的后端接口，跨域的话，可以在后端直接设置允许跨域，如 Hono: ",[101,312,313],{},"app.use('*', cors())",",但是这个B站的官方接口，只能用Cloudflare Workers代理下。",[18,316,317,318,321],{},"尝试用 Cloudflare Workers 代理B站的请求，出现第二个问题：",[307,319,320],{},"触发B站防爬机制","，chatgpt解释说B站可能会检测到你使用的是 Cloudflare 的 IP 地址，进而触发其防爬机制。",[18,323,324],{},"只能在本地请求数据，生成数据文件给前端页面调用。",[18,326,327],{},"最后，D1 维护视频BV号表数据，在本地调用BV号接口生成视频数据文件，再在前端调用数据文件展示视频信息。",[329,330,331],"style",{},"html pre.shiki code .s5TCs, html code.shiki .s5TCs{--shiki-default:#AB5959;--shiki-dark:#CB7676}html pre.shiki code .s_xSY, html code.shiki .s_xSY{--shiki-default:#59873A;--shiki-dark:#80A665}html pre.shiki code .si6no, html code.shiki .si6no{--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .s9nN2, html code.shiki .s9nN2{--shiki-default:#B07D48;--shiki-dark:#BD976A}html pre.shiki code .s_NWU, html code.shiki .s_NWU{--shiki-default:#2E8F82;--shiki-dark:#5DA994}html pre.shiki code .scnC2, html code.shiki .scnC2{--shiki-default:#B5695977;--shiki-dark:#C98A7D77}html pre.shiki code .spP0B, html code.shiki .spP0B{--shiki-default:#B56959;--shiki-dark:#C98A7D}html pre.shiki code .sTPum, html code.shiki .sTPum{--shiki-default:#1E754F;--shiki-dark:#4D9375}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":99,"searchDepth":142,"depth":142,"links":333},[334,335,336],{"id":16,"depth":142,"text":16},{"id":41,"depth":142,"text":41},{"id":66,"depth":142,"text":66},"md",{"date":339,"time":340},"7-16","7min",true,"\u002Fblog\u002F2025\u002Fbilibili-site",{"title":5,"description":99},"blog\u002F2025\u002Fbilibili-site","ne639CiAqpNBHIlx2w_Ypbrm7pxrx1Y_Um3Rq35PV7s",1779434092963]