CORS

Часть раздела REST API путешествия по Node.js на Coddy. Урок 20 из 25.

Кросс-доменный запрос PUT, PATCH или DELETE, а также запрос с типом содержимого JSON обычно заставляет браузер сначала запросить разрешение. Этот запрос OPTIONS называется предварительным запросом. Ответ должен разрешать источник, метод и заголовки запроса.

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

Указывайте Access-Control-Allow-Origin в каждом ответе, включая предварительный запрос. Если разрешён только один источник, можно отправлять это фиксированное значение в каждом ответе: браузер сравнивает его с источником страницы. Значение для методов или заголовков должно представлять собой одну строку со значениями, разделёнными запятыми.

Для OPTIONS отправьте ответ 204 и завершите обработку запроса. Для остальных методов оставьте заголовок источника и вызовите next(). Разместите это промежуточное ПО первым, перед express.json() и маршрутами, чтобы разрешение было и у ответов с ошибками. Панель запроса может показывать заголовки, но CORS обеспечивает соблюдение только в браузерах.

Задание

Легко

На этом шаге открывается подготовленный для курса проект API диспетчера задач, а не файлы вашего проекта из урока Пагинация (включая routes/tasks.js). Ваша предыдущая работа остаётся в своём уроке. Прочитайте предоставленные файлы, прежде чем редактировать server.js. Эта копия содержит маршруты CRUD для задач, проверку данных, пагинацию, фильтры и сортировку.

В server.js, перед express.json() и маршрутами, добавьте промежуточное ПО, разрешающее запросы с https://board.example.com. Установите Access-Control-Allow-Origin в точное значение этого источника, Access-Control-Allow-Methods — в GET, POST, PUT, PATCH, DELETE, OPTIONS, а Access-Control-Allow-Headers — в Content-Type. Для OPTIONS верните статус 204 и завершите ответ. Для остальных методов вызовите next.

Проверьте: отправьте OPTIONS /api/tasks/2. Вы должны увидеть статус 204 и три заголовка разрешений. Отправьте GET /api/tasks: по-прежнему возвращается список задач и заголовок источника. Запрос POST {"title":"Order new chairs"} к /api/tasks по-прежнему создаёт задачу со статусом 201.

Попробуйте сами

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

// Ошибки из маршрутов попадают сюда. Тело запроса с некорректным JSON — это
// ошибка клиента (400); всё остальное — наша ошибка (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');
});