CORS

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

교차 출처 PUT, PATCH 또는 DELETE 요청이나 JSON Content-Type을 사용하는 요청을 보내면 보통 브라우저가 먼저 권한을 요청합니다. 이 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를 적용하는 것은 브라우저뿐입니다.

챌린지

쉬움

이 단계에서는 Pagination에서 작업한 프로젝트 파일(여기에는 routes/tasks.js도 포함됨)이 아니라, 과정에서 준비한 작업 추적기 API 프로젝트를 엽니다. 이전 작업은 해당 레슨에 그대로 남아 있습니다. 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');
});