目錄
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 的請求,並允許 GET、HEAD、PUT、PATCH、POST 和 DELETE 方法。
使用 @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 配置選項?
您可以配置允許的來源、請求方法、頭部以及是否使用預檢請求等選項。
—