Не могу разобраться с websocket. Что я делаю не так?

Question

[VlLZAR]

import { io } from 'socket.io-client';

const socket = io('wss://stream.binance.com:9443/stream?streams=ethusdt@ticker');

export const subscribeToCryptoStream = () => {
  socket.on('connect', () => {
    console.log('Connected to Binance WebSocket');
  });

  socket.on('message', (e) => {
    const message = JSON.parse(e.data);
    console.log('Полученные данные:', message);
  });

  socket.on('disconnect', () => {
    console.log('Disconnected from WebSocket');
  });
};

export const unsubscribeFromCryptoStream = () => {
  socket.disconnect();
};

Пытаюсь отправить запрос на получение курса криптовалют, но на меня орет CORS и выдает ошибку (Access to XMLHttpRequest at 'https://stream.binance.com:9443/socket.io/?streams...' from origin 'localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource). Только недавно начал изучать вебсокеты и не понимаю что не так.

UPD: подсказали что нужен свой бэк, но с собственного бэка все равно не получается получить данные и выдается ошибка Access to XMLHttpRequest at 'localhost:3000/socket.io/?EIO=4&transport=polling&...' from origin 'localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Comments

[VoidVolker]

VlLZAR https://qna.habr.com/help/rules#3.8

[VoidVolker]

VlLZAR в выпадающем меню тега code есть возможность выбрать JavaScript для включения подсветки синтаксиса.

Answer 1

[Rsa97]

На этот вопрос тут уже отвечали неоднократно. RTFM CORS.
Если коротко, то для того, чтобы страница, открытая с вашего сервера, (localhost:5173), обратилась на страницу другого сервера (stream.binance.com:9443), этот другой сервер должен дать специальное разрешение в CORS-заголовках ответа. Если другой сервер не принадлежит вам, то единственным способом обхода является обращение через свой бэкенд, так как контроль CORS - встроенная функция браузера.

Comments

[VlLZAR]

Благодарю. Щас написал бэк, на нем все работает и данные приходят. Затем я пытаюсь их вытащить с моего бэка, но CORS все равно ругается Access to XMLHttpRequest at 'localhost:3000/socket.io/?EIO=4&transport=polling&...' from origin 'localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Rsa97]

VlLZAR, Читайте документацию. CORS включается если у сайтов различается хотя бы одна из частей адреса - схема (http - https), доменное имя или порт. Поскольку у вас порт не совпадает, ваш бэк должен отдавать разрешающие CORS-заголовки.

Answer 2

[VoidVolker]

Это значит, что доступ к данному ресурсу разрешен только с определённого домена или доменов.
HTTP -> Reference -> Заголовки HTTP -> Access-Control-Allow-Origin: https://developer.mozilla.org/ru/docs/Web/HTTP/Ref...