在 NestJS 中设置跨域访问

在开发 Web 应用程序时，跨域访问是一个常见的需求。本文将介绍如何在 NestJS 中设置跨域访问。

全局跨域设置

如果您希望在应用程序中的所有控制器和路由中启用跨域设置，并使用默认值，可以在 NestFactory 创建应用程序时传递 cors 参数并将其设置为 true，如下所示：

使用create方法

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { cors: true });

  await app.listen(3000);
}
bootstrap();

使用 enableCors

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { cors: true });
  app.enableCors()
  await app.listen(3000);
}
bootstrap();

只需按上述方式设置，应用程序的所有控制器和路由都会自动启用跨域设置。此时，任意的来源、方法、请求头和响应头都会被允许。

设置跨域访问白名单

如果您需要对跨域访问进行更精细的控制，可以使用 CorsOptions 接口来配置跨域访问白名单。

以下是一个使用 CorsOptions 示例的代码：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { CorsOptions } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const corsOptions: CorsOptions = {
    origin: ['http://example1.com', 'http://example2.com'],
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    exposedHeaders: ['Content-Length', 'X-Custom-Header'],
    credentials: true,
  };

  app.enableCors(corsOptions);

  await app.listen(3000);
}

bootstrap();

在上述示例中，我们使用 CorsOptions 接口自定义了跨域设置。下面是 CorsOptions 选项的详细说明：

• origin：允许访问的来源（域名或 IP 地址）列表。在我们的示例中，我们允许 http://example1.com 和 http://example2.com 访问我们的 API。如果你想允许来自所有域的请求，可以将 origin 属性设置为 true。
• methods：允许的 HTTP 方法列表。在我们的示例中，我们允许 GET、POST、PUT 和 DELETE 方法。
• allowedHeaders：允许的请求头列表。在我们的示例中，我们允许 Content-Type 和 Authorization 请求头。
• exposedHeaders：允许客户端访问的响应头列表。在我们的示例中，我们允许客户端访问 Content-Length 和 X-Custom-Header 响应头。
• credentials：指示是否允许发送凭据（例如 Cookie）到另一个域。我们在示例中设置为 true，以确保在跨域请求中包含凭据。

当我们启动应用程序并访问 API 时，可以在响应头中看到跨域设置。

以下是访问 http://example.com/api/posts 的响应头示例：

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Expose-Headers: Content-Length, X-Custom-Header
Access-Control-Allow-Credentials: true

通过这些设置，我们的前端应用程序可以从 http://example1.com 和 http://example2.com 发起跨域请求，并且能够接收和处理来自服务器的响应。

在本文中，我们介绍了如何在 NestJS 中设置跨域访问，并将全局设置和精细设置单独讨论了。通过了解这些设置的选项和用法，您可以更好地控制跨域访问，并确保安全性和可靠性。
需要注意的是，由于跨域访问涉及到安全性问题，所以请确保在设置跨域时进行适当的安全审核，以防止恶意攻击。同时，也要测试跨域设置是否正确，以确保前后端应用程序的稳定性和可靠性。

本文永久链接: https://www.mulianju.com/set-cors-in-nestjs/