CORS

Parte da seção APIs REST do Journey de Node.js da Coddy. Lição 13 de 18.

Uma página em https://board.example.com chama sua API com fetch, e o navegador bloqueia a resposta. Os navegadores permitem que uma página leia respostas somente da própria origem — o esquema, o host e a porta de onde ela veio — a menos que o servidor permita outras origens com cabeçalhos 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

Antes de um DELETE, um PATCH ou um corpo JSON, o navegador envia essa solicitação de preflight e prossegue somente se a resposta permitir. Todas as outras respostas também precisam de Access-Control-Allow-Origin. * permite qualquer origem, mas os navegadores não aceitam esse valor quando a página envia cookies (Access-Control-Allow-Credentials: true); por isso, especifique a origem. Somente os navegadores impõem o CORS: o curl e a barra de requisições o ignoram.

Desafio

Fácil

Um middleware antes das rotas define Access-Control-Allow-Origin: https://board.example.com e Access-Control-Allow-Credentials: true em cada resposta.
OPTIONS responde com 204, listando GET, POST, PUT, PATCH, DELETE em Access-Control-Allow-Methods e Access-Control-Allow-Headers: Content-Type.

Simule o navegador: envie OPTIONS /api/tasks/2 com o cabeçalho Origin: https://board.example.com, depois GET /api/tasks e leia os cabeçalhos de cada resposta.

Experimente você mesmo

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

// Os erros das rotas terminam aqui. Um corpo que não é um JSON válido é um
// erro do cliente (400); qualquer outro erro é nosso (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');
});