Update your settings

CORS Setup for IE App with Angular UI & NestJS Backend

Dear Dieter,

While a single, complete open-source tutorial combining all elements (IE-specific, Angular, NestJS, CORS) is rare, here’s a breakdown and resources to guide you. IE's CORS implementation is stricter than modern browsers – this is key.

Key Considerations for IE:

• Preflight Requests: IE always sends a preflight OPTIONS request. Your NestJS backend must handle this correctly.
• Simple Requests: Even for "simple" requests, ensure correct headers.
• Access-Control-Allow-Origin: Be specific. `*` can cause issues in IE. Use the exact origin.

Resources:

• NestJS CORS: NestJS Official Documentation on CORS - Configure the @nestjs/common package for CORS. Ensure you're correctly setting allowed origins, methods, and credentials.
• Angular CORS: Angular HTTP Client Documentation - While Angular itself doesn't *handle* CORS, understand how to structure your requests.
• CORS Explained: MDN Web Docs on CORS - Excellent background information.
• IE CORS Troubleshooting: Search for "IE CORS troubleshooting" - Microsoft documentation details IE-specific behaviors.

Example NestJS Configuration (app.module.ts):

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { CorsModule } from '@nestjs/platform-express';

@Module({
  imports: [
    ConfigModule.forRoot(),
    CorsModule.forRoot({
      origin: 'your-angular-app-origin', // Replace with your Angular app's origin
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'Authorization'],
      credentials: true, // If you need cookies
    }),
  ],
})
export class AppModule {}

Important: Thoroughly test with IE's developer tools (F12) to inspect network requests and responses. Pay close attention to the OPTIONS request and any error messages.

Best regards,
Siemens Self Support (Integrated with SiePortal)