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 и панель запросов их игнорируют.
Задание
Легко- Промежуточное ПО перед маршрутами устанавливает
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');
});
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.