对使用 NESTJS 启用 CORS 没有影响

Question

我无法启用 CORS 以使用最新的 NestJS 8.0.6 和新的 http + ws 项目进行测试。也就是说，我想在服务器响应中看到 Access-Control-Allow-Origin （以便客户端接受它）。这是我的 main.ts，我在其中尝试了 3 种方法：1) 使用选项，2) 使用方法，3) 使用 app.use。 None 其中有效。

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { microserviceConfig} from "./msKafkaConfig";

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { cors: true}); // DOESN'T WORK
  app.enableCors(); // DOESN'T WORK

  app.connectMicroservice(microserviceConfig);
  await app.startAllMicroservices();

  
  // DOESN'T WORK
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH,OPTIONS,UPGRADE,CONNECT,TRACE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Accept');
    next();
  });
  
  await app.listen(3000);



}
bootstrap();

如果我们接受所有域，请不要告诉我 CORS (XSForgery) 有多危险。 material 就够了。我很清楚这一点。这是关于 NestJS 不回复 header.

中的 Access-Control-Allow-Origin 元素

浏览器控制台报告：

Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=4&transport=polling&t=Nm4kVQ1' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在chromeheader检查中我看到：

Request URL: http://localhost:3000/socket.io/?EIO=4&transport=polling&t=Nm4kUZ-
Referrer Policy: strict-origin-when-cross-origin
Connection: keep-alive
Content-Length: 97
Content-Type: text/plain; charset=UTF-8
Date: Mon, 20 Sep 2021 19:41:05 GMT
Keep-Alive: timeout=5
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en,de-DE;q=0.9,de;q=0.8,en-US;q=0.7,es;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:3000
Origin: http://localhost:4200
Pragma: no-cache
Referer: http://localhost:4200/
sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
EIO: 4
transport: polling
t: Nm4kUZ-

Referrer Policy: strict-origin-when-cross-origin有影响吗？

（顺便说一句，它可以通过简单的快速设置正常工作。所以这不可能是我的浏览器的错。）

Answer 1

enableCors 和 { cors: true } 选项用于 HTTP 服务器（express 或 fastify）。显示 CORS 错误的 URL 来自 socket.io 连接。要为 socket.io 启用 CORS，您需要使用 @WebsocketGateway() 装饰器中的选项，例如

@WebsocketGateway({ cors: '*:*' })
export class FooGateway {}

确保将 websocket cors 的主机和端口设置为 host:port

Answer 2

我最近遇到了同样的问题
并将其固定如下在 main.ts

in main.ts

    // import
    import { NestExpressApplication } from '@nestjs/platform-express';

    //in bootstrap() function
    const app = await NestFactory.create<NestExpressApplication>(AppModule);
    app.enableCors();
    app.setGlobalPrefix('/api/v1')

//in your Gateway service 

import { Socket, Server } from 'socket.io';
import {
    OnGatewayConnection,
    OnGatewayDisconnect,
    OnGatewayInit,
    SubscribeMessage,
    WebSocketGateway,
    WebSocketServer,
} from "@nestjs/websockets";
@WebSocketGateway(
    {
        path: "/api/v1/ws",
        serveClient: false,
        cors: {
            origin: `*`
        }
    })
export class AppGateway
    implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
    
    private logger: Logger = new Logger(AppGateway.name);

    ...
    afterInit(server: Server) {
        this.logger.log(`Init`);
    }

    handleDisconnect(client: Socket) {
        this.logger.log(`handleDisconnect: ${client.id}`);
        this.wss.socketsLeave(client.id);
    }

    handleConnection(client: Socket, ...args: any[]) {
        this.wss.socketsJoin(client.id)
        this.logger.log(`handleConnection: ${client.id}`);
    }
}

   //in your client side 

 this.socket = io("ws://localhost:3000", 
       {
        path: "/api/v1/ws",
        reconnectionDelayMax: 10000,
       }
);

// package.json
  "dependencies": { 
  "@nestjs/platform-socket.io": "^8.0.6",
  "@nestjs/platform-express": "^8.0.0",
  "@nestjs/websockets": "^6.1.0"
},
 "devDependencies": {
  "@types/socket.io": "^3.0.2",
  "@types/ws": "^7.4.7"
}

Answer 3

我删除或更改了数组中的 transports 参数。来自前端

    //FRONTEND FILE
    socket = io(BE_URL, {
      withCredentials: true,
      query: {
        token,
        isUserNew,
      },
      transports: ['websocket', 'polling'], // USE ['polling', 'websocket'] OR DELETED IT
      autoConnect: false,
    });



//BACKEND FILE
@WebSocketGateway({
  cors: { credentials: true, methods: ['GET', 'POST'], origin: ['http://host1', 'http://host2']},
  transports: ['polling', 'websocket'],
})

我读了 - https://socket.io/docs/v3/client-initialization/#transports

One possible downside is that the validity of your CORS configuration will only be checked if the WebSocket connection fails to be established.

我真的希望这个答案能为您节省一些时间。

对使用 NESTJS 启用 CORS 没有影响

no affect on CORS enabling with NESTJS

websocket

node.js

nestjs