CORS错误:我的WebApp需要某种服务器来订阅Web套接字订阅源吗

Question

我正在使用REACT JS，并试图在我的REACT应用程序中建立一个小网页，将连接到加密货币门户Coinbase的打开的websocket提要，以显示一些推送的实时货币价格。

我试着用打开插座

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网络应用程序(显示数据的正确体系结构方式是什么

非常感谢你的回答。

Answer 1

在WS协议中继续连接之前，初始握手是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有点不同。在后一种情况下，无论发送了什么标头，都会收到一个响应。但是，如果resource.com未设置Access-Control-Allow-Origin: *标头，则浏览器将出于安全原因阻止该请求。

以上内容对于websocket非常重要，因为websocket连接是通过充当握手的标准HTTP请求启动的。在第一个HTTP请求成功后，客户端将发送此处所示的标头以升级到websocket。因此，如果最初的HTTP失败是因为请求是从浏览器发起的，而resource.com没有发送Access-Control-Allow-Origin: *，那么升级到websocket就无法工作。

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

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