Tiktok 在 VUE js 中嵌入视频 CORB 问题答案

【问题标题】：Tiktok embed video CORB issue in VUE jsTiktok 在 VUE js 中嵌入视频 CORB 问题
【发布时间】：2023-08-09 10:20:02
【问题描述】：

此 HTML 工作正常，TikTok 视频显示完美（简单的 index.html 文件）。但问题是当我在 VUE js 中使用这段代码时，它给了我一个 CORS 错误

<!DOCTYPE html>
<html lang="en">
<head>
 <script async src="https://www.tiktok.com/embed.js"></script> 
</head>

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@zachking/video/6904661755687865605"
    data-video-id="6904661755687865605" style="max-width: 605px;min-width: 325px;">
    <section> <a target="_blank" title="@zachking" href="https://www.tiktok.com/@zachking">@zachking</a>
        <p>What’s the longest amount of time you’ve been stuck in <a title="traffic" target="_blank"
                href="https://www.tiktok.com/tag/traffic">#traffic</a> ? �????????????</p> <a target="_blank"
            title="♬ original sound - Zach King" href="https://www.t
    k.com/music/original-sound-6904661761874479877">♬ original sound - Zach King</a>
    </section>
</blockquote>
<video></video>
</html>

我把这个脚本标签放在了vue的index.html文件的head部分

<script async src="https://www.tiktok.com/embed.js"></script>

我不知道为什么会出现 CORS 错误。有什么解决办法吗？

【问题讨论】：

标签： vue.js cross-origin-read-blocking

【解决方案1】：

就我而言，这段代码运行良好。

// In the template of the Vue file

<iframe :src="videoUrl" :srcdoc="embedHtml"></iframe>

index.html的head标签中的<script async src="https://www.tiktok.com/embed.js"></script> 是不必要的。

【讨论】：