为什么我不能使用 Vue 初始化一个 Channel？

Question

我在尝试初始化频道时遇到问题。我遵循了提供的一些教程（https://getstream.io/blog/chat-messaging-with-laravel/，https://getstream.io/blog/tutorial-build-customer-support-chat-with-laravel -vue-and-stream/ ) 有一个堆栈作为我的 (Laravel + Vue)我已经在后端获取令牌，初始化客户端，在客户端设置用户和令牌。但是当我尝试做this.channel.watch();一个简单的频道查询时const filter = { type: 'messages', id: '1000056864'};                const sort = { last_message_at: -1 };                const channels = await this.client.queryChannels(filter, sort, {                    watch: true,                    state: true,                });它将返回给我错误如下：在' https://chat-us-east-1.stream-io-api.com/channels/messages/1000056864/query?user_id=62&api_key=2e ******e2&connection_id=5983f850-3d50-访问 XMLHttpRequest来自来源“ http://local.site.test ”的 4ac3-9c06-d9e0fdaf7212'已被 CORS 策略阻止：请求标头字段 x-csrf-token 不允许在预检响应中访问控制允许标头。一切都在后端工作，甚至是等效的调用。

Answer 1

根据您收到的错误，您似乎将 CSRF 令牌包含在所有 AJAX 请求中。Stream API 服务器有一个您可以传递的标头白名单，这是为了防止开发人员意外发送敏感数据。在这种特定情况下，csrf-token为了便于使用，是否可以列入此类白名单是有争议的。

也许您正在前端使用类似的东西？

$.ajaxSetup({

    headers: {

        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    }

});

如果是这种情况，我的建议是选择更细粒度的解决方案，例如：

$.ajaxSetup({

    url: "/laravel/",

    headers: {

        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    }

});

或者确保只有你的 Laravel 后端通过提取执行 Ajax 调用的 JS 代码来接收 CSRF 令牌。

CSRF 令牌不如会话 ID 有价值，但它们的存在是为了让您的应用程序更安全，并且不打算与第三方共享。