对使用NESTJS使能CORS没有影响

Question

我未能启用CORS与最新的NestJS 8.0.6和一个新的http + ws项目进行测试。也就是说，我希望在服务器响应中看到Access-Control-Allow-Origin(以便客户机接受它)。这是我的主要。我尝试了3种方法:1)使用选项，2)使用方法，3)使用app.use。

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)有多危险。这方面的材料已经够多了。我很清楚这一点。这是关于NestJS不回复标题中的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.

在铬头检查我看到:

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是否有影响?

(顺便说一句，用一个简单的express设置就可以了。)所以不可能是浏览器的问题。)

Answer 1

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

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

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

Answer 2

我删除或更改了传输参数。它来自前端

//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

一个可能的缺点是只有在WebSocket连接建立失败时才会检查CORS配置的有效性。

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

Answer 3

我最近遇到了同样的问题
并修复如下在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"
}