跳到主要内容

CORS:为什么您的 fetch 积木不工作

如果您使用 fetch、HTTP 或网络扩展,而请求总是失败,即使您已允许,原因几乎总是 CORS。这是浏览器安全功能,不是 Bilup 或扩展的 bug。

什么是 CORS

CORS(跨源资源共享)是网站声明是否允许其他网站读取其响应的方式。它解决的问题很简单:有些网站想阻止其他网站的访问(想象一下,您访问的任何页面都能在您登录时读取您的银行账户),有些网站则想允许访问。

默认情况下,网站允许跨源访问。网站必须通过发送 Access-Control-Allow-Origin 头来主动选择开放。Scratch API 的部分内容选择了开放,这就是 Bilup 能从 Scratch 加载项目的原因。当网站没有选择开放时,浏览器会阻止 Bilup 读取响应,您会得到一个通用的网络错误。

这是由浏览器本身强制执行的。Bilup 无法在网页上覆盖它。

如何解决

这取决于您获取该 URL 的原因。

  • 使用不同的 URL。 如果您只是托管静态文件,请将它们移到支持带 CORS 的直接下载的主机上。如果一个 API 阻止 CORS,请检查是否有替代 API 允许它。
  • 使用 CORS 代理。 CORS 代理是另一个服务器,它为您获取 URL 并重新发送带 CORS 头的响应。公共代理确实存在,但通常很短命,因为运营成本高且被严重滥用。Bilup 不提供代理。
  • 在桌面版或打包构建中运行项目。 这些不受浏览器 CORS 规则约束(见下文)。

桌面版和打包项目

使用Bilup 打包器打包为 Electron 应用的项目默认绕过 CORS,就像原生应用一样,因此 fetch 积木可以访问任何 URL。

打包后以普通 HTML 文件在浏览器中运行的项目仍受正常浏览器 CORS 规则约束,因为它们仍然是网站。

如果您运行服务器

如果您控制被 fetch 的服务器,并且希望网站能够读取它,请在您想公开的响应上设置 Access-Control-Allow-Origin 头为 *。搜索您的 Web 服务器或框架的名称加 "cors" 会找到示例。

另请参阅