javascript - CORS错误: Do I need some kind of server for my WebApp to subscribe to a Web Socket Feed?

Question

我正在使用 REACT JS，并尝试在我的 REACT 应用程序中构建一个小网页，该网页连接到加密货币门户 Coinbase 的开放 websocket feed，以便显示一些推送的实时货币价格。

我尝试通过以下方式打开套接字

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 主题。这是我的问题:

在我的 javascript Web 应用程序中显示来自外部服务器的数据的正确架构方式是什么？

非常感谢您的回答。

Answer 1

在 WS 协议(protocol)中，连接继续之前初始握手是 HTTP。在初始握手中，GDAX/Coinbase 服务器不会发送 Access-Control-Allow-Origin: *。不幸的是，您需要使用自己的服务器通过 websocket 连接到他们的服务器，然后您的客户端/最终用户必须连接到您的服务器才能实时接收数据。请参阅下面的线程:

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

PS:当您从带有 location.hostname 的浏览器向目标域 resource.com 发出 GET/POST 请求时，它与从 Linux 执行curl/wget 有点不同。在后一种情况下，无论发送什么 header ，您都会收到响应。但是，如果 resource.com 未设置 Access-Control-Allow-Origin: * header ，浏览器出于安全原因会阻止该请求。

上述内容对于 websocket 很重要，因为 websocket 连接是通过充当握手的标准 HTTP 请求启动的。第一个 HTTP 请求成功后，客户端将发送看到的 header here升级到 websocket。因此，如果初始 HTTP 因请求是从浏览器发起且 resource.com 未发送 Access-Control-Allow-Origin: * 而失败，则升级到 websocket 将无法工作.

这是 websocket 服务器的一个好方法(但还不够，还经常使用身份验证/ token 机制)，以防止有人在服务器中托管 html 文件，从而向 resource.com 发送 websocket 请求。因为如果您的服务器从 500 个客户端同时获得 500 个点击，那么您的服务器所做的就是托管和发送 html/js，并且大部分工作将由 resource.com 通过提供 ws 服务来完成连接到 500 个客户端。相反，resource.com 强制您的服务器建立单个 ws 连接(来自后端的服务器本身)，并将其余的留给您。现在，在与 resource.com 建立初始 ws 连接后，您的服务器必须向这 500 个客户端提供 Websocket 连接并向它们发送收到的数据。在某种程度上，它充当镜子/放大器。

我将创建memcache/redis来临时将价格信息从ws连接存储到ram中，并从那里获取它们并将它们发送到您的客户端向您的服务器打开的辅助websocket连接。 (除非您想长期保留数据)