CORS

Teil des Abschnitts REST-APIs der Node.js-Journey von Coddy. Lektion 13 von 18.

Eine Seite auf https://board.example.com ruft deine API mit fetch auf, und der Browser blockiert die Antwort. Browser lassen eine Seite Antworten nur von ihrem eigenen Ursprung lesen, also von dem Schema, Host und Port, von dem sie stammt, sofern der Server andere nicht mit CORS-Headern zulässt.

OPTIONS /api/products/7
Origin: https://shop.example.com
Access-Control-Request-Method: DELETE

204 No Content
Access-Control-Allow-Origin: https://shop.example.com
Access-Control-Allow-Methods: GET, DELETE
Access-Control-Allow-Headers: Content-Type

Vor einem DELETE, einem PATCH oder einem JSON-Body sendet der Browser diese Vorabprüfung und fährt nur fort, wenn die Antwort dies zulässt. Auch jede andere Antwort benötigt Access-Control-Allow-Origin. * lässt jeden Ursprung zu, aber Browser weisen dies zurück, wenn die Seite Cookies sendet (Access-Control-Allow-Credentials: true); gib daher den Ursprung an. Nur Browser setzen CORS durch: curl und die Request-Leiste ignorieren es.

Aufgabe

Einfach

Eine Middleware vor den Routen setzt bei jeder Antwort Access-Control-Allow-Origin: https://board.example.com und Access-Control-Allow-Credentials: true.
OPTIONS antwortet mit 204 und führt in Access-Control-Allow-Methods GET, POST, PUT, PATCH, DELETE sowie in Access-Control-Allow-Headers: Content-Type auf.

Spiele den Browser: Sende OPTIONS /api/tasks/2 mit dem Header Origin: https://board.example.com, dann GET /api/tasks, und lies die Header jeder Antwort.

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, der kein gültiges JSON enthält, 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');
});