如何配置xAPI wrapper发送xAPI语句至Laravel应用解决CORS认证问题

问题描述 #

我有一份由Storyline制作的xAPI内容，希望将交互生成的statement发送至自研Web应用而非默认的LRS。该Web应用基于Laravel框架开发，用户需通过邮箱、密码完成身份认证后才可使用。
为实现statement转发，我已完成如下配置：

• 在Web应用中创建了支持POST方法的API端点路由
• 在xAPI wrapper配置中，将endpoint参数修改为上述自建API路由地址，配置代码如下：

const conf = {
        "endpoint":"here I added my api endpoint route of the webapp",
        "auth":"Basic " + toBase64(""),
    }

当前只要用户和xAPI内容交互触发statement发送，请求就会报CORS错误，我推测该问题与认证配置有关，咨询如何在xAPI wrapper中正确添加认证凭据。
错误截图参考：

解决方案 #

你看到的CORS错误第一诱因不是认证配置错误，是Laravel端没有正确响应跨域预检（OPTIONS）请求，浏览器在预检阶段就拦截了请求，根本没走到认证校验逻辑，按以下两步处理即可：

第一步：修复Laravel端跨域配置 #

所有跨域的非简单请求，浏览器都会自动先发OPTIONS方法的预检请求，校验服务端返回的跨域头是否合法，校验通过才会发真正的POST业务请求：

1. Laravel 9及以上版本已内置CORS支持，低版本先安装官方扩展：

composer require fruitcake/laravel-cors

2. 发布CORS配置文件：

php artisan vendor:publish --tag="cors"

3. 修改config/cors.php，为你的xAPI接收端点放开跨域权限：

// 替换成你自己的xAPI接口路径
'paths' => ['api/your-xapi-statement-path'],
// 生产环境可限定为['POST', 'OPTIONS']
'allowed_methods' => ['POST', 'OPTIONS'],
// 生产环境替换成你托管Storyline内容的具体域名，不要用*避免安全风险
'allowed_origins' => ['https://your-storyline-host-domain.com'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['Content-Type', 'Authorization', 'X-Experience-API-Version'],
'exposed_headers' => [],
'max_age' => 0,
// 如果用cookie-based Sanctum认证就设为true，用token认证设为false
'supports_credentials' => false,

4. 打开app/Http/Kernel.php，把HandleCors中间件加到全局中间件组的最顶部，确保OPTIONS请求不会被认证、路由中间件拦截返回401/405。

第二步：正确配置xAPI wrapper认证参数 #

你当前配置里toBase64("")传了空值，相当于没带任何认证信息，需要和你Laravel端用的认证方式匹配：

• 优先用登录态Token认证（安全，推荐）：用户通过邮箱密码登录你的Web应用后，从接口返回值里拿到有效认证Token（Sanctum/Passport签发的都可以），存在本地存储里，xAPI wrapper用Bearer模式携带：

// 从本地存储/全局登录态里取当前登录用户的有效token
const userToken = localStorage.getItem('user_api_token');
const conf = {
    "endpoint": "https://your-laravel-domain.com/api/your-xapi-statement-path",
    "auth": "Bearer " + userToken,
}

• 如果确实要用Basic Auth模式，就按邮箱:密码的格式拼接认证串，不要留空：

const conf = {
    "endpoint": "https://your-laravel-domain.com/api/your-xapi-statement-path",
    "auth": "Basic " + toBase64("user_login_email@example.com:user_login_password"),
}

注意：绝对不要把固定的账号密码硬编码在前端xAPI配置里，所有用户共用一套凭据会有严重的数据越权、接口泄露风险，必须用当前登录用户的动态临时Token做认证。

验证方法 #

改完配置后打开浏览器控制台网络面板，先看OPTIONS预检请求的返回状态是不是200/204，只有预检请求通过后，POST的statement请求才会正常发送，此时再检查请求头里的Authorization字段是否正确携带，就不会再报CORS错误。

内容的提问来源于stack exchange，提问作者Dr.Noob