写前哔哔

最近想为我的Twikoo添加新的表情包，根据教程需要建立一个json文件放在自己的云存储中，但是当json文件上传到腾讯云cos时，添加链接到Twikoo后点击表情按钮没有反应，而同样的文件添加到多吉云存储时却是正常的。依旧通过豆包大法得知，腾讯云 COS 默认未配置跨域访问规则，导致 Twikoo 无法加载 JSON 文件。多吉云可能已默认开放跨域请求，因此正常工作。

正片开始

  • 登录腾讯云 COS 控制台
    进入目标存储桶的 安全管理 > 跨域访问 (CORS) 页面。

  • 添加 CORS 规则

    • 来源 (Origin)：填写 Twikoo 所在的域名（如https://yourdomain.com），支持泛域名（如https://*.yourdomain.com）。

    • 操作 (Methods)：勾选 GET（Twikoo 仅需读取 JSON 文件）。

    • 允许头部 (Allow-Headers)：填写*（允许所有请求头）。

    • 暴露头部 (Expose-Headers)：建议填写Etag。

    • 超时 (Max-Age)：设置为600（单位：秒）。

    • 返回 Vary: Origin：勾选该选项以兼容不同来源的请求。

      image-20250814213108747

  • Tips：如果存储桶还绑定了CDN加速域名，比如EdgeOne，还要刷新一下缓存才能起效，如果仍然没有效果，需要根据腾讯云教程添加http响应头，EdgeOne默认透传，不需额外添加。

补充：跨域访问 vs 防盗链 核心区别

最开始我以为是由于防盗链原因，所以搜了两者之间的区别：

对比项 跨域访问 防盗链
目的 保护用户数据安全（防止跨站脚本窃取数据） 保护服务器资源（防止被其他网站盗用，节省带宽）
限制方 由浏览器主动限制（前端限制） 由服务器主动限制（后端限制）
针对的请求 主要限制 “脚本发起的跨域数据请求”（如 AJAX、Fetch） 主要限制 “资源文件的引用”（如图片、视频、音频、文件）
允许的方式 服务器通过设置 Access-Control-Allow-Origin 响应头，允许指定域名跨域请求 服务器通过设置白名单（允许的 Referer），允许指定域名引用资源
典型例子 a.com 的 JS 无法直接请求 b.com 的接口数据（除非 b.com 开了 CORS） b.com 盗用 a.com 的图片，a.com 服务器拒绝返回图片
  • 跨域访问：浏览器怕 “数据被偷”，不让不同网站的脚本随便通信；
  • 防盗链：服务器怕 “资源被蹭”，不让其他网站随便用自己的图片 / 视频。

最后叨叨

个人纯小白，全程豆包编码，仅做个人成功案例分享，大佬勿喷。