fetch와 Cross-Origin 요청

• 네트워크 요청은 오리진(도메인, 프로토콜, 포트 이 세 가지에 의해 결정)이 요청하는 네트워크의 오리진과 일치/불일치에 따라 성공/실패

• COR(Cross-Origin-Resource-Sharing) 이란 오리진이 다른 곳에 네트워크 요청을 보내는 것

• 과거엔 어디든 데이터를 보낼 수 있는 <\form> 과 target 을 정할 수 있는 <\iframe> 을 이용하거나 <\script> 를 이용하여 CORS 구현

• 브라우저 관점에서 CORS 요청은 simple/non-simple 요청으로 나뉨

• simple 요청

  • simple 요청의 조건

    • 메서드가 GET, POST, HEAD 중 하나

    • 헤더는 허용목록에 속하는 헤더유형

  • simple 요청의 절차

    1. 오리진 정보가 담긴 Origin 헤더와 함께 브라우저가 요청 보냄

    2. 자격 증명이 없는 요청의 경우(기본) 서버는 Access-Control-Allow-Origin 의 값이 Origin 값과 동일하거나 *인 응답 보냄

    3. 자격 증명이 있는 요청의 경우 서버는 Origin 값과 동일한 Access-Control-Allow-Origin 과 값이 true 인 Access-Control-Allow-Credentials 응답 보냄

    4. 브라우저는 응답 헤더에 Access-Control-Allow-Origin 있는지 확인하고 존재할 시 JS 통해 접근 가능하게 하고 없을 시 에러 발생시킴

  • JS 이용해 Cache-Control나 Content-Language, Content-Type, Expires, Last-Modified, Pragma를 제외한 응답 헤더에 접근하려면 응답 헤더의 Access-Control-Expose-Headers에 접근을 허용하는 헤더가 명시돼 있어야 함

• node-simple 요청

  • simple 요청 이외의 요청

  • 절차

    1. 브라우저는 fetch 메서드에서 자체적으로 동일한 URL에 OPTIONS 메서드 사용한 preflight 요청을 보내게됨 (preflight 헤더에 본 요청의 메서드 정보와 본 요청의 헤더 정보가 담김)

    2. 서버는 상태코드 200과 허용되는 메서드 목록과 헤더 목록이, 몇 초간 preflight 요청 없이 CORS 요청 바로 처리할 담긴 헤더 전송

    3. 이후엔 본 요청이 전송되고 절차는 ‘simple’ 요청과 동일

• simple/non-simple 요청의 차이

  • <\form> 이나 <\script> 태그를 사용해도 가능/불가능 (메서드가 GET/POST 인 HTTP 요청인지)

  • simple 요청은 Origin 헤더와 함께 바로 요청이 전송되며 non-simple 요청은 preflight 요청이라 불리는 사전 요청을 보내 퍼미션 여부 물어보는지

• 자격 증명

  • 자격 증명의 영향력이 강하여 JS 가 사용자 대신헤 민감한 정보 접근할수 있기 때문에 CORS 요청 시 관련 쿠키 전송하지 않음

  • 자격증명 절차

    1. fetch 메서드에 credentrials: “include” 옵션 추가

    2. 해당 URL 에 대응하는 쿠키 전송됨

    3. 자격 증명 담긴 요청 서버에서 받아들이기로 했을 시 서버는 응답에 Access-Control-Allow-Origin 헤더(서버에 대한 정보 정확해야 신뢰할수 있기 때문에 *은 금지됨)와 함께 Access-Control-Allow-Credentials: true 헤더를 추가해서 보냄