CORS

Fait partie de la section API REST du Journey Node.js de Coddy. Leçon 13 sur 18.

Une page sur https://board.example.com appelle votre API avec fetch, et le navigateur bloque la réponse. Les navigateurs permettent à une page de lire les réponses provenant uniquement de sa propre origine, c’est-à-dire le schéma, l’hôte et le port dont elle provient, sauf si le serveur autorise d’autres origines à l’aide d’en-têtes CORS.

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

Avant un DELETE, un PATCH ou l’envoi d’un corps JSON, le navigateur envoie cette requête de pré-vérification et ne poursuit que si la réponse l’autorise. Toutes les autres réponses doivent aussi inclure Access-Control-Allow-Origin. * autorise toutes les origines, mais les navigateurs le refusent lorsque la page envoie des cookies (Access-Control-Allow-Credentials: true) ; indiquez donc l’origine. Seuls les navigateurs appliquent CORS : curl et la barre de requête l’ignorent.

Défi

Facile

Un intergiciel placé avant les routes définit Access-Control-Allow-Origin: https://board.example.com et Access-Control-Allow-Credentials: true dans chaque réponse.
OPTIONS répond avec le statut 204 et Access-Control-Allow-Methods qui répertorie GET, POST, PUT, PATCH, DELETE, ainsi que Access-Control-Allow-Headers: Content-Type.

Joue le rôle du navigateur : envoie OPTIONS /api/tasks/2 avec l’en-tête Origin: https://board.example.com, puis GET /api/tasks, et lis les en-têtes de chaque réponse.

Essayez vous-même

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);

// Les erreurs provenant des routes arrivent ici. Un corps qui n'est pas du JSON valide est une
// erreur du client (400) ; toute autre erreur est de notre fait (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');
});