CORS

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

Uma requisição cross-origin com PUT, PATCH ou DELETE, ou uma requisição com Content-Type JSON, normalmente faz o navegador pedir permissão primeiro. Essa requisição OPTIONS é uma preflight. A resposta deve permitir a origem, o método e os cabeçalhos da requisição.

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

Defina Access-Control-Allow-Origin em todas as respostas, incluindo a preflight. Com uma única origem permitida, você pode enviar esse valor fixo em todas as respostas: o navegador o compara com a origem da página. Cada valor de métodos ou cabeçalhos é uma única string separada por vírgulas.

Para OPTIONS, envie 204 e encerre a resposta. Para os outros métodos, mantenha o cabeçalho de origem e chame next(). Coloque esse middleware primeiro, antes de express.json() e das rotas, para que as respostas de erro também tenham permissão. A barra de requisição pode inspecionar os cabeçalhos, mas somente os navegadores aplicam o CORS.

Desafio

Fácil

Esta etapa abre o projeto de API de rastreamento de tarefas preparado para o curso, em vez dos arquivos do seu projeto de Paginação (incluindo routes/tasks.js). Seu trabalho anterior continua na própria lição. Leia os arquivos fornecidos antes de editar server.js. Esta cópia contém rotas CRUD de tarefas, validação, paginação, filtros e ordenação.

Em server.js, antes de express.json() e das rotas, adicione um middleware que permita https://board.example.com. Defina Access-Control-Allow-Origin como essa origem exata, Access-Control-Allow-Methods como GET, POST, PUT, PATCH, DELETE, OPTIONS, e Access-Control-Allow-Headers como Content-Type. Para OPTIONS, responda com 204 e encerre. Para os outros métodos, chame next.

Experimente: envie OPTIONS /api/tasks/2. Você deve ver 204 e os três cabeçalhos de permissão. Envie GET /api/tasks: ele ainda retorna a lista de tarefas e o cabeçalho de origem. POST {"title":"Order new chairs"} para /api/tasks ainda cria uma tarefa com 201.

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