ruffle 中文文档 下载 App

CORS 跨域、HTTP 混合内容与 HTTPS 升级

CORS 跨域政策

症状

Console 里红色报错：

Access to fetch at '...swf' from origin '...' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

根本原因

Ruffle Web 版内部用 fetch() API 加载 SWF。浏览器对 fetch 请求有跨域限制——如果 SWF 所在的服务器没返回 Access-Control-Allow-Origin 响应头，浏览器就直接拦。

解法

解法 A：SWF 放在自己服务器（推荐）

最简单——SWF 和页面同域同源，完全不涉及跨域。自己维护老 Flash 内容的站长，把 SWF 跟页面放一个域名下就行。

解法 B：给 SWF 服务器加 CORS 头

如果 SWF 必须从别的域名加载（比如 CDN），在那个域名的服务器上给 .swf 响应加头：

Access-Control-Allow-Origin: *

Nginx：

location ~* \.(swf|xml|mp3|png|jpg)$ {
  add_header Access-Control-Allow-Origin *;
}

Apache：

<FilesMatch "\.(swf|xml|mp3|png|jpg)$">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

解法 C：Cloudflare Transform Rule（最简单）

Cloudflare 有免费的响应头 Transform Rule，匹配 .swf 后缀然后加 Access-Control-Allow-Origin: * 就行，5 分钟搞定。

解法 D：代理中转（临时调试）

如果 SWF 在别人服务器上、且你改不了 CORS——本地起个 Node / Python 代理把请求转发一下，能绕过去。但这只是调试用，上线必须回到 A 或 B。

混合内容（Mixed Content）

症状

Console 里红色报错：

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure ... This request has been blocked.

根本原因

现代浏览器（Chrome 80+、Edge 80+、所有 Safari）禁止 HTTPS 页面里加载 HTTP 资源——包括脚本、图片、音频、视频、fetch 请求。

解法

Ruffle 默认 upgradeToHttps: true，尝试把 HTTP URL 自动升级成 HTTPS。但升级后的 HTTPS URL 如果不存在（服务器上没配 HTTPS），还是失败。

三条路：

  1. 开启目标站点的 HTTPS（最推荐，Cloudflare 一键开）
  2. 手动修 SWF 里写死的 HTTP URL（用 JPEXS 反编译 SWF，把里面硬编码的 HTTP URL 改成 HTTPS）
  3. 在 SWF 加载器里自己写脚本拦截 HTTP 请求（高级，一般人用不到）

临时关 upgradeToHttps 试试

RufflePlayer.config 里设 upgradeToHttps: false。但注意关掉之后混合内容会被浏览器直接拦——除非你的页面本身也是 HTTP（2026 年几乎没有正常网站会这样）。

CSP（Content-Security-Policy）头

如果你的网站启用了严格 CSP，需要确保：

Content-Security-Policy:
  script-src 'self' https://unpkg.com;
  default-src 'self';
  worker-src 'self' blob:;
  wasm-unsafe-eval;

关键：worker-src blob: 或 'wasm-unsafe-eval'——WebAssembly 编译需要。现代 Chrome / Edge / Firefox 从 2023 年开始支持 'wasm-unsafe-eval' 这个 CSP 关键字，更安全。

快速自查清单