Почему я не могу инициализировать канал, используя Vue? - PullRequest
Новая
       115

Почему я не могу инициализировать канал, используя Vue?

1 голос
/ 18 апреля 2020

У меня проблемы с инициализацией канала. Я следовал некоторым предоставленным учебникам (https://getstream.io/blog/chat-messaging-with-laravel/, https://getstream.io/blog/tutorial-build-customer-support-chat-with-laravel-vue-and-stream/), у которых мой стек (Laravel + Vue)

I Я уже получаю токен на бэкэнде, инициализирую клиента, устанавливаю пользователя и токен на клиенте.

Но когда я пытаюсь выполнить 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,
                });

, мне будет возвращено сообщение об ошибке:

Доступ к XMLHttpRequest в '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' из источника 'http://local.site.test' заблокировано политикой CORS: Запрос Поле заголовка x-csrf-token не разрешено Access-Control-Allow-Headers в ответе предпечатной проверки.

Все работает на бэкэнде, даже эквивалентные вызовы.

1 Ответ

1 голос
/ 19 апреля 2020

Судя по полученной вами ошибке, похоже, что вы включили свой токен CSRF во все ваши AJAX запросы. Серверы Stream API имеют белый список заголовков, которые вы можете передать, чтобы разработчики не могли случайно отправлять конфиденциальные данные. В этом конкретном c случае можно утверждать, что 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 бэкэнд получает токен CSRF, извлекая код JS выполнение Ajax вызовов.

Маркеры CSRF не так ценны, как идентификаторы сеансов, но они существуют для того, чтобы сделать ваше приложение более безопасным, и не предназначены для совместного использования с третьими сторонами.

...