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

Question

我有一个应用程序连接到 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 连接进入连接-重新连接循环，如下所示：

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

Answer 1

这就是我修复的方式

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;
  }
}

主文件

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

Answer 2

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

@WebSocketGateway({ cors: true })