CORS

Coddy Node.js 여정의 REST API 섹션에 포함된 레슨. 18개 중 13번째.

https://board.example.com의 페이지가 fetch로 API를 호출하지만, 브라우저가 응답을 차단합니다. 서버가 CORS 헤더로 다른 출처를 허용하지 않는 한, 브라우저는 페이지가 자신의 origin, 즉 페이지가 제공된 스킴, 호스트, 포트에서 온 응답만 읽을 수 있게 합니다.

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 본문을 보내기 전에 브라우저는 이 preflight 요청을 보내고, 응답이 허용하는 경우에만 계속 진행합니다. 그 밖의 모든 응답에도 Access-Control-Allow-Origin이 필요합니다. *는 모든 출처를 허용하지만, 페이지가 쿠키를 보내면 브라우저가 이를 거부하므로(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이 포함됩니다.

브라우저 역할을 해 보세요. Origin: https://board.example.com 헤더와 함께 OPTIONS /api/tasks/2를 보내고, 이어서 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');
});