2025 年最新 NestJS CORS 跨域資源共享教學

學習NestJS中CORS跨域資源共享的方法

目錄

2025 年最新 NestJS CORS 跨域資源共享(Cross-Origin Resource Sharing)

NestJS 是一個基於 TypeScript 的 Node.js 框架,專為構建高效、可擴展的企業級應用程序而設計。它提供了一個模塊化的結構,讓您能夠將應用程序的不同部分進行模塊化,並使用 Dependency Injection 的容器來聯繫應用程序的各部分。

NestJS 提供了一個強大的 CORS 機制,使您能輕鬆在應用程序中實現跨域資源共享(Cross-Origin Resource Sharing,CORS)。CORS 是一種安全機制,允許瀏覽器和伺服器之間安全地共享資源,並使瀏覽器能從不同的域名請求資源,而不受同源政策的限制。

如何在 NestJS 中配置 CORS

要在 NestJS 中使用 CORS,您需要在應用程序的 main.ts 文件中導入 CorsOptions 類,並將其傳遞給 NestFactory.create() 方法:

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

const corsOptions: CorsOptions = {
  origin: 'http://example.com', // 允許的來源
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // 允許的請求方法
  preflightContinue: false,
};

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

在上述範例中,我們將 CorsOptions 類傳遞給 NestFactory.create() 方法,以應用 CORS 選項。這意味著我們允許來自 http://example.com 的請求,並允許 GETHEADPUTPATCHPOSTDELETE 方法。

使用 @nestjs/cors 模塊配置 CORS

此外,您還可以用 @nestjs/cors 模塊來配置 CORS。該模塊提供了 CorsMiddleware 類,能讓您輕鬆將 CORS 配置添加到應用程序中:

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(CorsMiddleware);
  await app.listen(3000);
}
bootstrap();

在這個範例中,我們將 CorsMiddleware 類傳遞給 app.use() 方法,以添加 CORS 配置。

使用 CorsOptionsFactory 配置 CORS

您還可以使用 @nestjs/cors 模塊中的 CorsOptionsFactory 類來配置 CORS。這個類提供了一個 create() 方法,使您能輕鬆地將 CORS 配置添加到應用程序中:

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

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(CorsOptionsFactory.create());
  await app.listen(3000);
}
bootstrap();

在這個範例中,我們將 CorsOptionsFactory.create() 方法傳遞給 app.use() 方法,以添加 CORS 配置。

錯誤排除

在配置 CORS 時,您可能會遇到以下錯誤:

  • Access-Control-Allow-Origin 錯誤:確保在 corsOptions 中正確設置 origin
  • 預檢請求失敗:確保您的伺服器允許正確的請求方法和頭部。

延伸應用

CORS 配置不僅限於單一的域名,您還可以設置一個陣列來允許多個來源:

const corsOptions: CorsOptions = {
  origin: ['http://example.com', 'http://anotherexample.com'],
};

此外,您可以使用正則表達式來匹配多個來源,但要小心使用,以免造成安全隱患。

Q&A(常見問題解答)

1. NestJS 中的 CORS 是什麼?

CORS 是一種安全機制,允許瀏覽器從不同域名請求資源,NestJS 提供了一個內建的 CORS 配置機制。

2. 如何排除 CORS 錯誤?

檢查您的伺服器設置,確保允許的來源、請求方法和頭部配置正確。

3. NestJS 支援哪些 CORS 配置選項?

您可以配置允許的來源、請求方法、頭部以及是否使用預檢請求等選項。

發佈留言