Ошибка CORS: Нужен ли какой-либо сервер для моего WebApp, чтобы подписаться на веб-ленту сокетов?

Question

Я работаю с REACT JS и попытался создать небольшую веб-страницу в моем приложении REACT, которое подключает к открытому веб-сокету криптовалютного портала Coinbase, чтобы отображать некоторые цены в реальном времени в режиме реального времени.

Я пытался открыть сокет с помощью

import React from 'react';
import { useEffect, useState } from 'react';
import io from 'socket.io-client';

const CryptoFeed = () => {
    const [prices, setPrices] = useState([]);

    useEffect(() => {
        debugger;
        const socket = io.connect('wss://ws-feed.pro.coinbase.com');
        //const socket = io.connect('wss://ws-feed.gdax.com'); // I tried gdax too, but its the same error

        socket.on('connect', () => {
            console.log('connect');
        });
    }, []);
    return <div>Hallo</div>;
};

export default CryptoFeed;

, но затем я получаю эту ошибку в консоли chrome (и firefox):

Access to XMLHttpRequest at 'https://ws-feed.gdax.com/socket.io/?EIO=3&transport=polling&t=N6s7NQ5' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я начал свое исследование и обнаружил, что CORS topi c. И вот мой вопрос:

Каков правильный архитектурный способ отображения данных с внешнего сервера в моем javascript веб-приложении?

Спасибо большое за ваше answwers.

Answer 1

Начальное рукопожатие - HTTP перед продолжением соединения по протоколу WS. В этом начальном рукопожатии серверы GDAX / Coinbase не отправляют Access-Control-Allow-Origin: *. К сожалению, вам нужно подключиться к их серверам через веб-сокет, используя ваш собственный сервер, а затем ваши клиенты / конечные пользователи должны подключиться к вашему серверу для получения данных в реальном времени. Смотрите эту тему ниже:

https://github.com/coinbase/coinbase-pro-node/issues/116#issuecomment -332925708