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

html5 • • 问答

我有一个应用程序连接到 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作为浏览器控制台中的唯一消息

回答

这就是我修复的方式

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

回答

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

@WebSocketGateway({ cors: true })

以上是Chromev88+和Nestjs服务器上socket-io连接的CORS错误的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>