跨域设置

在开发 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 发起跨域请求，并且能够接收和处理来自服务器的响应。