为什么我不能使用 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,
                });

它将return给我的错误如下：

在“https://chat-us-east-1.stream-io-api.com/channels/messages/1000056864/query?user_id=62&api_key=2e******e2&connection_id=5983f850-3d50-4ac3-9c06-d9e0fdaf7212' from origin 'http://local.site.test”访问 XMLHttpRequest 已被 CORS 策略阻止：Access-Control-Allow-Headers 在预检响应中不允许请求 header 字段 x-csrf-token。

一切都在后端工作，甚至是等效的调用。

Answer 1

根据您收到的错误，您似乎将 CSRF 令牌包含在所有 AJAX 请求中。 Stream API 服务器有一个 headers 的白名单，你可以通过，这是为了防止开发人员意外发送敏感数据。在这种特定情况下，为了便于使用，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 令牌不如 session ID 有价值，但它们的存在是为了让您的应用程序更安全，并且不打算与第 3 方共享。

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

Why I cant initialize a Channel using Vue?

php

laravel

vue.js

getstream-io