CORS

Parte de la sección API REST del Journey de Node.js de Coddy. Lección 20 de 25.

Una solicitud PUT, PATCH o DELETE de origen cruzado, o una solicitud con un Content-Type JSON, normalmente hace que el navegador pida permiso primero. Esta solicitud OPTIONS es una comprobación previa. La respuesta debe permitir el origen, el método y los encabezados de la solicitud.

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

Establece Access-Control-Allow-Origin en todas las respuestas, incluida la comprobación previa. Si hay un único origen permitido, puedes enviar ese valor fijo en todas las respuestas: el navegador lo compara con el origen de la página. Cada valor de métodos o encabezados es una cadena de elementos separados por comas.

Para OPTIONS, envía 204 y termina la respuesta. Para los demás métodos, conserva el encabezado del origen y llama a next(). Coloca este middleware primero, antes de express.json() y las rutas, para que las respuestas de error también tengan permiso. La barra de solicitudes puede inspeccionar los encabezados, pero solo los navegadores aplican CORS.

Desafío

Fácil

Este paso abre el proyecto de API de seguimiento de tareas preparado para el curso, en lugar de los archivos de tu proyecto de Pagination (incluido routes/tasks.js). Tu trabajo anterior permanece en su propia lección. Lee los archivos proporcionados antes de editar server.js. Esta copia contiene rutas CRUD de tareas, validación, paginación, filtros y ordenación.

En server.js, antes de express.json() y de las rutas, añade middleware que permita https://board.example.com. Establece Access-Control-Allow-Origin en ese origen exacto, Access-Control-Allow-Methods en GET, POST, PUT, PATCH, DELETE, OPTIONS, y Access-Control-Allow-Headers en Content-Type. Para OPTIONS, responde con 204 y finaliza la respuesta. Para los demás métodos, llama a next.

Pruébalo: envía OPTIONS /api/tasks/2. Deberías ver 204 y los tres encabezados de permisos. Envía GET /api/tasks: sigue devolviendo la lista de tareas y el encabezado de origen. POST {"title":"Order new chairs"} a /api/tasks sigue creando una tarea con 201.

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