Java >> Java Tutorial >  >> Java

So verwenden Sie CORS in der NestJS-Anwendung

Java

In diesem Beitrag werden wir darüber sprechen, wie man CORS (Cross-Origin Resource Sharing) in einer NestJS-Anwendung verwendet. Bevor wir zeigen, wie einfach es ist, CORS zu aktivieren, werden wir in diesem Beitrag einige Grundlagen behandeln.

  • Was ist CORS?
  • Was ist das NestJS-Framework?
  • Wie verwende ich CORS?

Was ist CORS?

In einer gewöhnlichen REST-API-basierten Anwendung gibt es einen Client, der die von einem Server bereitgestellte API aufruft. Beim Zugriff auf diese APIs können Clients verschiedene Ressourcen anfordern, darunter Bilder, Videos, iFrames oder Skripts. Eine Website, die Ressourcen anfordert, kann sich auf einer anderen Domäne befinden als die Domäne der Ressource. Standardmäßig kann eine Anforderung zum Abrufen von Ressourcen fehlschlagen. Hier kommt CORS ins Spiel.

Wie bereits erwähnt, steht CORS für Cross-Origin Resource Sharing. Standardmäßig macht CORS einen Aufruf vom Client zum Server sicherer. In vielen Fällen wissen wir, wer der Kunde ist und auf welcher Domäne er sein wird. In solchen Fällen möchten wir die Sicherheit für Clients lockern, die die APIs aufrufen. Wir tun dies, indem der Client die Anforderungsheader Access-Control-Allow-Origin sendet . Diese Header geben an, welche Ursprünge auf die API zugreifen können.

CORS ist ein HTTP-Header-basierter Mechanismus, der es einem Server ermöglicht, andere Ursprünge (Domäne, Schema oder Port) als seinen eigenen anzugeben, von denen ein Browser das Laden von Ressourcen zulassen sollte. – Mozilla Firefox

Sehen wir uns das folgende Diagramm an

Ein Client aus der abccompany.com sendet eine Anfrage an s3.amazon.com um auf eine Ressource von S3 zuzugreifen. In diesem Fall haben Client und Server unterschiedliche Ursprünge. Normalerweise schlägt diese Anfrage aufgrund von Cross-Origins fehl. Es ist ein Sicherheitsproblem für Browser. CORS ermöglicht den Zugriff auf eine Ressource von einem Server mit einem anderen Ursprung im Vergleich zu einer Anfrage, von der sie stammen. CORS fügt Access-Control-Allow-Origin hinzu Kopfzeilen in der Anfrage.

Was ist NestJS Framework?

NestJS ist ein Framework zum Erstellen skalierbarer serverseitiger NodeJS-Anwendungen. Im Hintergrund verwendet NestJS HTTP-Server-Frameworks wie Express.

Um loszulegen,

npm i -g @nestjs/cli

Nest bietet eine sofort einsatzbereite Anwendungsarchitektur, die es Entwicklern und Teams ermöglicht, hochgradig testbare, skalierbare, lose gekoppelte und leicht zu wartende Anwendungen zu erstellen – NestJS

Erstellen Sie ein neues Projekt mit Nest

nest new project-name .

Wie verwende ich CORS?

Um zu zeigen, wie CORS verwendet wird, erstellen wir eine nestjs-Anwendung.

nest new corsdemoapp – erstellt einen neuen Ordner für corsdemoapp .

Wenn ich jetzt npm start ausführe , wird unsere standardmäßige nestjs-Anwendung bei http://localhost:3000 gestartet .

NestJs macht dies wirklich einfacher, indem es eine Methode enableCors() bereitstellt . Dies sieht wie folgt aus:

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

Es gibt eine andere Möglichkeit, CORS zu aktivieren. Durch Übergabe von cors als Objekt in NestFactory.create() Methode.

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

Wenn wir die Antwortheader für die an http://localhost:3000 gestellte Anfrage sehen möchten , sehen sie wie folgt aus:

Der zweite Screenshot zeigt den Header Access-Control-Allow-Origin mit dem Wert * . Das bedeutet, dass Anfragen von jeder Ursprungsquelle auf den Server zugreifen können, um eine Antwort von http://localhost:3000 zu erhalten .

Welche anderen Optionen können wir für CORS hinzufügen?

Es gibt einige andere Optionen, die wir mit CORS festlegen können, während wir sie über enableCors() aktivieren . Wenn wir wissen, welche anderen Domains auf unsere API zugreifen, können wir diese Domain festlegen. Manchmal kann die API öffentlich sein. In diesem Fall können wir den Platzhalter * verwenden für Access-Control-Allow-Origin .

app.enableCors(
    { 
      origin: ['https://betterjavacode.com', 'https://www.google.com'],
    }
  );

Außerdem können wir nur eine Reihe von Methoden für API-Aufrufe zulassen.

app.enableCors(
    { 
      origin: ['https://betterjavacode.com', 'https://www.google.com'],
      methods: ['POST', 'PUT', 'DELETE', 'GET']
    }
  );

Der häufigste Anwendungsfall von CORS ist das Erstellen von RESTful-APIs im Backend und deren Aufruf über das Frontend.

Schlussfolgerung

Beim Erstellen und Bereitstellen von Anwendungen auf Servern ist es wichtig zu wissen, wer Ihre APIs aufruft. CORS bietet eine Sicherheitsfunktion. Das Akzeptieren einer Anfrage von jeder Domäne kann ein Sicherheitsrisiko darstellen. NestJS bietet eine einfache Möglichkeit zum Aktivieren von CORS und Optionen zum Hinzufügen von Domänen, von denen der Server die Anfrage annehmen kann. Mit CORS können wir Cross-Site-Request-Forgery-Angriffe (CSRF) vermeiden. Einige der häufigsten Exploits behandle ich in meinem Buch Simplifying Spring Security.


Java-Tag