为什么我不能使用 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 有价值，但它们的存在是为了让您的应用程序更安全，并且不打算与第三方共享。