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

Chrome

自从Chrome v88+版本以及NestJS服务器上的套接字io连接出现CORS错误以来，许多开发人员都遇到了这个问题。CORS（跨源资源共享）是一种安全机制，用于限制在浏览器中运行的Javascript代码从不同源加载资源。这种错误通常会导致浏览器阻止跨域请求，从而导致网络请求失败。

CORS错误的出现是因为浏览器执行了一个预检请求（preflight request），以确定服务器是否允许跨域请求。预检请求是一个OPTIONS请求，用于检查服务器是否接受实际的请求方法和头部。如果服务器返回的响应中没有包含适当的CORS头部信息，浏览器将拒绝实际的请求，从而导致CORS错误。

为了解决这个问题，我们可以在NestJS服务器上配置CORS中间件，以允许特定的源访问资源。下面是一个使用NestJS框架创建的简单示例代码，展示了如何解决CORS错误：

typescript
import { NestFactory } from '@nestJS/core';
import { AppModule } from './app.module';
async function bootstrap() {
  const app = awAIt NestFactory.create(AppModule);
  
  app.enableCors(); // 启用CORS中间件
  
  awAIt app.listen(3000);
}
bootstrap();

在上述代码中，我们使用enableCors()方法来启用CORS中间件。这将允许任何来源访问我们的NestJS服务器上的资源。如果您只想允许特定的来源，可以传递一个配置对象给enableCors()方法，设置origin属性为允许的来源。

另一种解决CORS错误的方法是在服务器端设置适当的CORS头部信息。您可以在每个响应中手动设置这些头部，或者使用NestJS的@Headers()装饰器来自动添加它们。下面是一个示例代码，展示了如何在NestJS控制器中使用@Headers()装饰器来设置CORS头部：

typescript
import { Controller, Get, Headers } from '@nestJS/common';
@Controller('example')
export class ExampleController {
  @Get()
  @Headers('Access-Control-Allow-Origin', '*')
  @Headers('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  @Headers('Access-Control-Allow-Headers', 'Content-Type')
  example() {
    return 'Hello, CORS!';
  }
}

在上述代码中，我们使用@Headers()装饰器来设置CORS头部信息。这将允许任何来源（通过Access-Control-Allow-Origin: *）以及特定的请求方法（通过Access-Control-Allow-Methods: GET, POST, PUT, DELETE）和头部（通过Access-Control-Allow-Headers: Content-Type）访问我们的控制器。

解决CORS错误的注意事项

解决CORS错误时，有一些注意事项需要记住：

1. 在生产环境中，应该尽量限制允许的来源，以提高安全性。将Access-Control-Allow-Origin设置为*将允许任何来源访问资源，这可能会导致安全风险。

2. 如果您的NestJS服务器使用了身份验证机制（例如JWT令牌），则需要确保正确配置CORS中间件或CORS头部，以允许身份验证请求正常通过。

3. 在使用CORS中间件时，可以通过传递一个配置对象来设置其他选项，例如允许的方法、头部、凭证等。请参考NestJS文档以获取更多信息。

CORS错误是由浏览器执行的安全机制，用于限制跨域请求。通过在NestJS服务器上配置CORS中间件或设置适当的CORS头部信息，我们可以解决这个问题。选择合适的解决方案取决于您的应用程序需求和安全性要求。

希望本文对您解决CORS错误问题有所帮助！