CORS

Teil des Abschnitts REST-APIs der Node.js-Journey von Coddy. Lektion 20 von 25.

Bei einer ursprungsübergreifenden PUT-, PATCH- oder DELETE-Anfrage oder einer Anfrage mit einem JSON-Content-Type bittet der Browser normalerweise zuerst um Erlaubnis. Diese OPTIONS-Anfrage ist eine Vorab-Anfrage. Die Antwort muss den Ursprung, die Methode und die Anfrage-Header zulassen.

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Methods: GET, POST, PATCH, OPTIONS
Access-Control-Allow-Headers: Content-Type

Setze Access-Control-Allow-Origin in jede Antwort, einschließlich der Vorab-Anfrage. Wenn du einen Ursprung zulässt, kannst du diesen festen Wert in jeder Antwort senden: Der Browser vergleicht ihn mit dem Ursprung der Seite. Jeder Wert für Methoden oder Header ist eine durch Kommas getrennte Zeichenfolge.

Sende bei OPTIONS den Status 204 und beende die Antwort. Behalte bei anderen Methoden den Origin-Header bei und rufe next() auf. Platziere diese Middleware an erster Stelle, vor express.json() und den Routen, damit auch Fehlerantworten die Berechtigung haben. Die Anforderungsleiste kann die Header untersuchen, aber nur Browser setzen CORS durch.

Aufgabe

Einfach

Dieser Schritt öffnet das vorbereitete Task-Tracker-API-Projekt des Kurses statt deiner Projektdateien aus Pagination (einschließlich routes/tasks.js). Deine frühere Arbeit bleibt in ihrer eigenen Lektion. Lies die bereitgestellten Dateien, bevor du server.js bearbeitest. Diese Kopie enthält CRUD-Routen für Aufgaben, Validierung, Paginierung, Filter und Sortierung.

Füge in server.js vor express.json() und den Routen Middleware hinzu, die https://board.example.com erlaubt. Setze Access-Control-Allow-Origin auf genau diesen Ursprung, Access-Control-Allow-Methods auf GET, POST, PUT, PATCH, DELETE, OPTIONS und Access-Control-Allow-Headers auf Content-Type. Antworte bei OPTIONS mit 204 und beende die Anfrage. Rufe bei anderen Methoden next auf.

Probiere es aus: Sende OPTIONS /api/tasks/2. Du solltest 204 und die drei Berechtigungsheader sehen. Sende GET /api/tasks: Die Aufgabenliste und der Ursprungsheader werden weiterhin zurückgegeben. POST {"title":"Order new chairs"} an /api/tasks erstellt weiterhin eine Aufgabe mit 201.

Probier es selbst

import express from 'express';
import { sendError } from './errors.js';
import taskRoutes from './routes/tasks.js';

const app = express();
app.use(express.json());

app.use('/api/tasks', taskRoutes);

// Fehler aus den Routen landen hier. Ein Body mit ungültigem JSON ist ein
// Fehler des Clients (400); alles andere ist unser Fehler (500).
app.use((err, req, res, next) => {
    if (err.type === 'entity.parse.failed') {
        return sendError(res, 400, 'invalid_json', 'The body is not valid JSON');
    }
    console.error(err);
    sendError(res, 500, 'server_error', 'Something went wrong');
});

app.listen(3000, () => {
    console.log('Task tracker API on port 3000');
});