CORS

CORS

Cross Origin Resource Sharing
동일 출처 정책

• 동일한 출처의 리소스에만 접근하도록 제한
• 동일 출처 : 프로토콜, 호스트명, 포트가 같음을 의미
  • https://naver.com:80 에서 https는 프로토콜, naver.com은 호스트명, 80은 포트

필요성

• 보안상의 이유
• 모든 출처를 허용하면 원치 않는 사이트에서 사용자인 척 요청을 보내게 될 수 있음.
• 서로 다른 도메인을 가진 서버와 클라이언트가 API를 사용하게 됨.

동작 과정

• 브라우저에서 임의로 시행
• GET, HEAD, POST 중 한 가지 방식을 사용
  • POST의 경우 다음 중 하나여야 함
    • application/x-www-form-unlencoded
    • multipart/form-data
    • text/plain

1. 요청을 보냄
2. 브라우저는 Host와 같은 헤더를 추가하며 교차 출처 요청에 대해 Origin Request Header을 자동으로 추가
3. 서버에서 Origin Request Header 확인. Origin 값이 허용되면, Access-Control-Allow-Origin 요청 헤더 Origin 값으로 설정
4. 응답 받은 브라우저는 Access-Control-Allow-Origin 헤더가 탭의 출처와 일치하는지 확인. * 와일드카드 연산자 포함하는 경우도 통과.

CORS 에러 해결

• Spring
  • @CrossOrigin 사용. 속성은 다음과 같음
    • Origins : 허용된 출처
    • allowedHeader : 사용할 수 있는 요청 헤더 목록
    • allowCredential : 브라우저가 요청 관련 쿠키 포함하는지 여부 결정
• CorsFilter 사용
  

참고
https://bohyeon-n.github.io/deploy/web/cors.html