CORS

Parte de la sección API REST del Journey de Node.js de Coddy. Lección 13 de 18.

Una página en https://board.example.com llama a tu API con fetch, y el navegador bloquea la respuesta. Los navegadores permiten que una página lea respuestas solo de su propio origen, es decir, el esquema, el host y el puerto de donde procede, a menos que el servidor permita otros mediante encabezados 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 un DELETE, un PATCH o un cuerpo JSON, el navegador envía esta solicitud preflight y continúa solo si la respuesta lo permite. Todas las demás respuestas también necesitan Access-Control-Allow-Origin. * permite cualquier origen, pero los navegadores lo rechazan cuando la página envía cookies (Access-Control-Allow-Credentials: true), así que especifica el origen. Solo los navegadores aplican CORS: curl y la barra de solicitudes lo ignoran.

Desafío

Fácil

Un middleware antes de las rutas establece Access-Control-Allow-Origin: https://board.example.com y Access-Control-Allow-Credentials: true en cada respuesta.
OPTIONS responde con 204 e incluye GET, POST, PUT, PATCH y DELETE en Access-Control-Allow-Methods, y Access-Control-Allow-Headers: Content-Type.

Simula el navegador: envía OPTIONS /api/tasks/2 con el encabezado Origin: https://board.example.com, después GET /api/tasks y lee los encabezados de cada respuesta.

Pruébalo tú mismo

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

// Los errores de las rutas terminan aquí. Un cuerpo que no es JSON válido es un
// error del cliente (400); cualquier otro error es nuestro (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');
});