Origin이란 무엇인가
Coddy Node.js 여정의 REST API 섹션에 포함된 레슨. 25개 중 18번째.
브라우저에서는 일반적으로 페이지의 JavaScript가 자신의 출처에서 온 API 응답을 읽을 수 있습니다. 이 동일 출처 규칙은 페이지가 다른 사이트의 데이터를 자유롭게 읽지 못하게 합니다. CORS(Cross-Origin Resource Sharing)를 사용하면 서버가 응답 헤더를 통해 다른 출처를 허용할 수 있습니다.
브라우저 페이지에는 출처가 있습니다. 출처는 스킴, 호스트, 포트를 모두 합친 것입니다. 동일한 출처의 서로 다른 경로는 CORS 허가 없이도 API를 공유할 수 있습니다. 호스트, 스킴 또는 포트가 바뀌면 다른 출처가 됩니다.
new URL('https://board.example.com/tasks').origin;
// 'https://board.example.com'
new URL('https://board.example.com/help').origin;
// 동일한 출처URL은 주소를 이름이 붙은 부분으로 읽어 들이는 내장 클래스입니다. origin 속성에는 경로와 쿼리가 포함되지 않습니다. 제공된 페이지 주소는 시작 코드에서 고정되어 있습니다. 이 실습에서는 출처를 비교합니다. 다음 단계에서는 서버가 서로 다른 출처 간의 접근을 허용하도록 합니다.
요청의 Origin 헤더에는 이미 이 출처 값이 들어 있습니다. 다음 레슨에서는 해당 헤더를 읽습니다.
챌린지
쉬움이것은 간단한 연습 프로젝트입니다. 설정은 제공되어 있으니 exercise.js만 수정하세요.
입력된 주소가 페이지의 origin과 같으면 {"same":true}를 반환하고, 그렇지 않으면 false를 반환하세요. POST {"address":"https://board.example.com/api/tasks"}를 /result에 보내면 true가 반환됩니다. https를 http로 바꾸거나 호스트 또는 포트를 바꾸면 false가 반환됩니다. 이 연습에서 주소는 모두 유효한 절대 URL입니다.
처음 GET /result 요청에는 제공된 예시 {"address": "https://board.example.com/api/tasks"}가 사용됩니다. 다른 입력을 시험하려면 JSON 본문과 함께 POST /result를 사용하세요.
직접 해보기
const page = 'https://board.example.com/tasks';
export function exercise({ address }) {
return { same: address === page };
}
REST API의 모든 레슨
직접 연습해 보세요: Express 플레이그라운드