https://www.example.com 和 https://example.com socket.io 连接问题答案

【问题标题】：https://www.example.com and https://example.com socket.io connection problemhttps://www.example.com 和 https://example.com socket.io 连接问题
【发布时间】：2022-02-06 14:33:58
【问题描述】：

如何同时获得https://example.com 和https://www.example.com 以供端点连接？ socket.io 在 http://example.com 连接没问题但不是https://www.example.com

我的服务器看起来像

const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: "https://www.example.com:3000",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }});

我的客户端端点看起来像这样

const ENDPOINT = 'https://example.com/';

【问题讨论】：

配置您的 DNS 以将 example.com 和 www.example.com 指向相同的主机 IP 地址，然后使用您的 cors 配置支持这两个域。然后，任一 URL 将转到同一主机。
添加的来源包括 www.example.com 和 example.com 但基于我的客户端 ENDPOINT 如果我转到 www 版本，反之亦然，它会被阻止例如，如果我将 ENDPOINT 放到 example.com 并在浏览器上转到 example.com，它可以工作，但当我到达 www.example.com 时却不行，因为它被 cors 阻止，如果我将其更改为 www，同样会发生相反的情况。 example.com。
``` const ENDPOINT = 'example.com'; const socket = io(ENDPOINT, { withCredentials: true, extraHeaders: { "my-custom-header": "my-custom-header" } }); socket.on("data", data => { setResponse(data); } ```
将端点设置为${window.location.hostname}/ 解决了我的问题，但我仍然不知道为什么浏览器地址必须与我的端点匹配才能让 cors 不停止它
显然是因为您没有正确执行服务器端 COR 的工作。如果协议、域和端口都匹配，那么 COR 就不是问题。如果协议、域或端口不同，那么您的服务器端代码必须允许 COR 访问。仅供参考，如果您在从客户端连接时将transports: ['websocket'] 设置为选项，那么它将直接转到完全不受 COR 限制的 webSocket 连接。

标签： reactjs express socket.io

【解决方案1】：

将您的 DNS 配置为将 example.com 和 www.example.com 指向相同的主机 IP 地址，然后使用您的 cors 配置支持这两个域。然后，任一 URL 都将转到同一主机。

如果您将 socket.io 配置为立即使用 webSocket 启动，而不是使用通常启动的 http 轮询，您可以完全避免 cors。您可以通过将transports: ['websocket'] 选项添加到客户端连接来在客户端中执行此操作。

而且，您的自定义标头可能会阻止 COR 并需要飞行前许可。 COR 有两个层次，简单和不简单。当您添加自定义标头时，您会强制 COR 进入需要预检的非简单路由，这可能超出了内置的 socketio cors 功能所能处理的范围。

【讨论】：