CORS - Cross Origin Resource Sharing

Jace·2023년 1월 18일
0

Cross Origin Resource Sharing

브라우저가 리소스 로드를 허용해야 하는 자체 출처가 아닌 다른 출처를 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘이다.

그 메커니즘 중 보안적인 이유로 Cross-origin HTTP 요청들을 제한합니다. 서버의 동의에 따라 요청을 허락과 제한.

console.log(location.origin);

콘솔을 찍어서 origin 값을 알아낼 수 있다.

CORS 동작 원리

접근제어에 사용되는 3가지 시나리오가 있다.

단순 요청 (Simple Request)

메서드

  • GET
  • POST
  • HEAD

자동으로 설정되는 헤더 제외 설정할 수 있는 헤더는 다음과 같이 변경

  • Accept
  • Accept-Language
  • Content-Language

Content-Type이 다음과 같은 경우

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

사전 요청 (Preflight Request)

단순 요청이 아닌 cross-origin 요청은 모두 prefilght 요청을 한다. 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메서드를 사용하여 요청. 사용자 데이터에 영향을 미칠 수 있는 요청이므로 사전에 확인

Preflight Request

  • Origin : 요청 출처
  • Access-Control-Request-Method : 실제 요청의 메서드
  • Access-Control-Request-Headers : 실제 요청의 추가 헤더

Preflight Response

  • Access-Control-Allow-Origin : 허가 출처
  • Access-Control-Allow-Methods : 허가 메서드
  • Access-Control-Allow-Headers : 허가 헤더
  • Access-Control-Max-Age : Preflight 응답 캐시 시간

인증 요청 (Credentialed Request)

인증 관련 헤더를 포함할 때 사용하는 요청이다.

클라이언트
쿠키 또는 JWT 토큰을 담아 보낼 경우 credentials : include 를 포함하여 보낸다.

서버
Access-Control-Allow-Credentials : true 해야 클라이언트의 인증 포함 요청에 허용이 가능하다.

CORS 오류 해결 방법

  • 프론트 프록시 서버 설정
    proxy 서버를 지정하여 설정

  • 직접 헤더 설정
    직접 헤더에 설정을 추가

  • 스프링부트 설정

참고자료

https://evan-moon.github.io/2020/05/21/about-cors/
https://velog.io/@frankle97/CORS%EB%9E%80
https://ko.wikipedia.org/wiki/%EA%B5%90%EC%B0%A8%EC%B6%9C%EC%B2%98%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0

흔히 사람들은 기회를 기다리고 있지만 기회는 기다리는 사람에게 잡히지 않는 법이다. 우리는 기회를 기다리는 사람이 되기 전에 기회를 얻을 수 있는 실력을 갖춰야 한다. 일에 더 열중하는 사람이 되어야한다. -안창호

profile
오늘한줄.

0개의 댓글