CORS란?

웹개발을 하다 자주 마주치는 CORS 에러

CORS

• 출처(Origin): Protocol + Host + Port (https:// + www.domain.com + :3000)
• 웹의 정책
  • Cross-Origin-Policy(교차 출처 정책): 다른 도메인으로부터 리소스가 요청될 경우 cross-origin HTTP 요청 ****사용.
    • HTML이 사용: <link>, <img> 등
  • Same-Origin-Policy(동일 출처 정책): 대부분의 브라우저가 cross-origin HTTP 요청을 보안 상 이유로 제한함. 요청을 보내기 위해서는 요청 보낼 대상과 Protocol + Host + Port가 같아야 함.
    • Javascript: XMLHttpRequest, Fetch API 등

해결법

• CORS(Cross Origin Resource Sharing, 교차 출처 리소스 공유): 타 도메인 간에 자원을 공유할 수 있게 해줌. CORS 표준은 웹 브라우저가 사용하는 정보를 읽을 수 있도록 허가된 출처 집합을 서버에게 알려주도록 허용하는 특정 HTTP 헤더를 추가함으로써 동작HTTP Header Description

  Access-Control-Allow-Origin	접근 가능한 url 설정
  Access-Control-Allow-Credentials	접근 가능한 쿠키 설정
  Access-Control-Allow-Headers	접근 가능한 헤더 설정
  Access-Control-Allow-Methods	접근 가능한 http method 설정

• CORS 동작 과정
  1. 클라이언트에서 헤더에 origin 담아 HTTP 요청을 보냄.
  2. 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달
  3. 클라이언트가 보냈던 origin과 받은 Access-Control-Allow-Origin 비교해 동일하면 응답 사용, 다르면 응답 버림
• CORS의 시나리오
  • Preflight Request(예비요청)
    • PUT, DELETE 메소드 (데이터 변경)
    • 예비요청: 본 요청을 보내기 전에 브라우저 스스로 안전한 요청인지 확인하는 것.
    • 예비요청 + 본요청. 클라이언트는 자신이 보낸 Origin과 서버에서 전달된 Access-Control-Allow-Origin을 비교하여 유효한지 아닌지 판단.
    • 보내는 것도 허락 맡아야. 예비요청이 통과되면 본 요청 보낼 수 있음.
  • Simple Request(단순요청)
    • GET, HEAD, POST 메소드 (데이터 변경 적음)
    • 예비요청 생략. 응답의 Access-Control-Allow-Origin을 보고 CORS 위반 여부를 검사.
    • 요청 다 보내는데 통과 못하면 답장을 못 받아옴.
  • Credentialed Request(인증된 요청)
    • 기존 예비요청에서 보안을 더 강화하고 싶을 때 사용
• CORS 해결 방법
  • 서버에서 Access-Control-Allow-Origin나 cors 미들웨어 설정 (근본)
    • Access-Control-Allow-Origin: https://localhost:3000 처럼 출처 명시하는 게 좋음. *은 권장하지 않음.
  • 클라이언트에서 Proxy 역할 해주는 중간 서버 만듦

참고 링크

• 링크
• 링크
• 링크