Chrome v88+ 和 Nestjs 服务器上的 socket-io 连接出现 CORS 错误

Posted 2023-03-10

【中文标题】Chrome v88+ 和 Nestjs 服务器上的 socket-io 连接出现 CORS 错误

【英文标题】：CORS error with socket-io connections on Chrome v88+ and Nestjs server

【发布时间】：2021-05-03 13:04:36

【问题描述】：

我有一个应用程序连接到 Nestjs 服务器以建立 WS 连接（服务器在不同的 URL 上，所以它是一个 CORS 请求）。

WebsocketGateway 就是这样定义的。

@WebSocketGateway(port, 
  handlePreflightRequest: (req, res) => 
    const headers = 
      'Access-Control-Allow-Headers': 'Authorization',
      'Access-Control-Allow-Origin': 'the page origin',
      'Access-Control-Allow-Credentials': true,
    ;
    res.writeHead(200, headers);
    res.end();
  
)

在 Chrome v87 及以下版本和 Firefox 上运行起来就像一个魅力。自从将我的浏览器升级到 Chrome 88 后，前端 socket-io 连接进行了一个连接-重新连接循环，如下所示：

预检请求通过并获得 200 响应，上面设置了标头； 实际连接失败，CORS error 作为浏览器控制台中的唯一消息

【参考方案1】：

以防其他人需要这个，在你的装饰器中有一个 cors 属性

@WebSocketGateway( cors: true )

【讨论】：

谢谢！为我工作。应该被接受为正确答案。

这成功了！请记住在服务器和客户端之间对齐 socket.io 的版本的一个小注意事项（我被困在这个问题上，即使在使用不同版本时添加了 cors: true ）。

谢谢谢谢谢谢！我正在潜入一个令人讨厌的代码兔子洞，试图让它工作。这确实需要在核心文档中！

如果我将其设置为仅 true，是否会限制连接？如何限制连接？

【参考方案2】：

我就是这样解决的

import  IoAdapter  from '@nestjs/platform-socket.io';
import  ServerOptions  from 'socket.io';

export class SocketAdapter extends IoAdapter 
  createioserver(
    port: number,
    options?: ServerOptions & 
      namespace?: string;
      server?: any;
    ,
  ) 
    const server = super.createIOServer(port,  ...options, cors: true );
    return server;
  

main.ts

const app = await NestFactory.create(AppModule,  cors: true );
app.useWebSocketAdapter(new SocketAdapter(app));

【讨论】：

它有效，谢谢。但我不知道这样做是否正常。我认为它必须直接在Nest中实现或者应该在文档中

那真是太棒了！它结束了数小时的彻底荒凉。 :)

在解决问题数小时后，您救了我的命。图例。