CORS

Fa parte della sezione API REST del percorso Node.js di Coddy. Lezione 20 di 25.

Una richiesta PUT, PATCH o DELETE tra origini, oppure una richiesta con un Content-Type JSON, normalmente fa sì che il browser chieda prima l’autorizzazione. Questa richiesta OPTIONS è una preflight. La risposta deve consentire l’origine, il metodo e le intestazioni della richiesta.

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

Imposta Access-Control-Allow-Origin su ogni risposta, inclusa la preflight. Se consenti una sola origine, puoi inviare quel valore fisso in ogni risposta: il browser lo confronta con l’origine della pagina. Ogni valore di metodi o intestazioni è una singola stringa separata da virgole.

Per OPTIONS, invia 204 e termina la risposta. Per gli altri metodi, mantieni l’intestazione dell’origine e chiama next(). Inserisci questo middleware per primo, prima di express.json() e delle route, così anche le risposte di errore avranno l’autorizzazione. La barra delle richieste può esaminare le intestazioni, ma solo i browser applicano CORS.

Sfida

Facile

Questo passaggio apre il progetto API del gestore di attività predisposto per il corso, invece dei file del tuo progetto di Impaginazione (incluso routes/tasks.js). Il lavoro precedente rimane nella sua lezione. Leggi i file forniti prima di modificare server.js. Questa copia contiene le route CRUD delle attività, la convalida, la paginazione, i filtri e l’ordinamento.

In server.js, prima di express.json() e delle route, aggiungi un middleware che consenta https://board.example.com. Imposta Access-Control-Allow-Origin su quell’origine esatta, Access-Control-Allow-Methods su GET, POST, PUT, PATCH, DELETE, OPTIONS e Access-Control-Allow-Headers su Content-Type. Per OPTIONS, rispondi con 204 e termina. Per gli altri metodi, chiama next.

Prova: invia OPTIONS /api/tasks/2. Dovresti vedere 204 e le tre intestazioni di autorizzazione. Invia GET /api/tasks: restituisce ancora l’elenco delle attività e l’intestazione dell’origine. POST {"title":"Order new chairs"} a /api/tasks crea ancora un’attività con 201.

Provalo tu

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

// Gli errori provenienti dalle route arrivano qui. Un corpo che non è un JSON valido è un
// errore del client (400); qualsiasi altro errore è nostro (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');
});