Menu
CoddyTech

CORS

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

Страница на https://board.example.com вызывает ваш API с помощью fetch, и браузер блокирует ответ. Браузеры позволяют странице читать ответы только с собственного источника — схемы, хоста и порта, откуда она пришла, — если сервер не разрешает доступ другим источникам с помощью заголовков 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

Перед запросом DELETE, PATCH или отправкой тела в формате JSON браузер отправляет этот предварительный запрос и продолжает только в том случае, если ответ разрешает это. Во всех остальных ответах тоже нужен заголовок Access-Control-Allow-Origin. Значение * разрешает любой источник, но браузеры не принимают его, если страница отправляет файлы cookie (Access-Control-Allow-Credentials: true), поэтому укажите источник. Правила CORS применяют только браузеры: curl и панель запросов их игнорируют.

challenge icon

Задание

Легко
  • Промежуточное ПО перед маршрутами устанавливает Access-Control-Allow-Origin: https://board.example.com и Access-Control-Allow-Credentials: true для каждого ответа.
  • На запрос OPTIONS возвращается ответ 204 с заголовком Access-Control-Allow-Methods, в котором перечислены GET, POST, PUT, PATCH, DELETE, и заголовком Access-Control-Allow-Headers: Content-Type.

Представь, что ты браузер: отправь OPTIONS /api/tasks/2 с заголовком Origin: https://board.example.com, затем GET /api/tasks и прочитай заголовки каждого ответа.

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

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');
});
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела REST API