CORS

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

Une requête interorigine PUT, PATCH ou DELETE, ou une requête avec un Content-Type JSON, amène généralement le navigateur à demander d’abord l’autorisation. Cette requête OPTIONS est une prérequête. La réponse doit autoriser l’origine, la méthode et les en-têtes de la requête.

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

Définissez Access-Control-Allow-Origin sur chaque réponse, y compris la prérequête. Avec une seule origine autorisée, vous pouvez envoyer cette valeur fixe dans chaque réponse : le navigateur la compare à l’origine de la page. Chaque valeur de méthodes ou d’en-têtes est une chaîne unique dont les éléments sont séparés par des virgules.

Pour OPTIONS, envoyez 204 et terminez la réponse. Pour les autres méthodes, conservez l’en-tête d’origine et appelez next(). Placez ce middleware en premier, avant express.json() et les routes, afin que les réponses d’erreur soient également autorisées. La barre de requête peut inspecter les en-têtes, mais seuls les navigateurs appliquent CORS.

Défi

Facile

Cette étape ouvre le projet d’API de suivi des tâches préparé pour le cours, plutôt que les fichiers de votre projet de Pagination (y compris routes/tasks.js). Votre travail précédent reste dans sa propre leçon. Lisez les fichiers fournis avant de modifier server.js. Cette copie contient des routes CRUD pour les tâches, la validation, la pagination, des filtres et le tri.

Dans server.js, avant express.json() et les routes, ajoutez un intergiciel qui autorise https://board.example.com. Définissez Access-Control-Allow-Origin sur cette origine exacte, Access-Control-Allow-Methods sur GET, POST, PUT, PATCH, DELETE, OPTIONS, et Access-Control-Allow-Headers sur Content-Type. Pour OPTIONS, répondez avec le statut 204, puis terminez la réponse. Pour les autres méthodes, appelez next.

Essayez : envoyez OPTIONS /api/tasks/2. Vous devriez voir le statut 204 et les trois en-têtes d’autorisation. Envoyez GET /api/tasks : la liste des tâches et l’en-tête d’origine sont toujours renvoyés. POST {"title":"Order new chairs"} vers /api/tasks crée toujours une tâche avec le statut 201.

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