javascript - SCORM 托管跨源

Question

我尝试在我的 LMS(学习管理系统)运行之外的其他域上托管一个分散的 SCORM 电子学习模块。 SCORM 模块通常在自己的浏览器框架/窗口中运行，并直接与 LMS 通信，在同一域中运行。这没有问题，因为没有安全问题。已经用我的代码尝试过这种情况并且它有效。

为了存档模块托管在另一台服务器上，我尝试使用类似包装器的东西。这些包装器托管在 LMS 上，从外部加载内容并通过 postMessage 与 LMS 通信。我试过这个开源项目:https://github.com/Didask/scol-r

但我没有让它工作。每次我以错误结束:Error grabbing 1.2 API-SecurityError:Blocked a frame with origin "https://..."from accessing a cross-origin frame。协议(protocol)、域和端口必须匹配。所以有些东西试图访问不允许的东西。 “SCORM_ScanParentsForApi”方法中引发异常。

我已经问过项目的作者，但他根本没有答案。我在 React 中设置了一个小型演示项目来模拟 LMS。添加了指向托管 SCORM 模块的我的外部内容服务器的包装器模块。

也许有人有想法或可以给我提示。我认为这是微不足道的事情。希望 ;)谢谢!

Answer 1

您的具体问题是 Access-Control-Allow-Origin header https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin

所以我们在 sosafe.de 上，skorm 类(class)在 lms0.sosafe.de 上这将导致 CORS 错误。您需要接受您的响应 header 。

您可以使用您的 apache 配置来做到这一点。这将使响应能够通过。

SetEnvIf Origin "http(s)?:\/\/(.+\.)?sosafe\.de(:\d{1,5})?$" CORS=$0

Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
Header merge  Vary "Origin"

您不必完全使用此代码，但可以修改服务器以添加 header Access-Control-Allow-Origin。如果你执行 Access-Control-Allow-Origin: * 这将启用来自任何地方的跨源请求(尽管你应该只允许你信任的域)。这应该可以解决您的问题。

否则它们应该在同一个域中。由于 SCOL-R 的设计，这可能是不可能的，SCOL-R 是允许您访问 API 的 scorm 连接器。