브라우저가 리소스 로드를 허용해야 하는 자체 출처가 아닌 다른 출처를 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘이다.
그 메커니즘 중 보안적인 이유로 Cross-origin HTTP 요청들을 제한합니다. 서버의 동의에 따라 요청을 허락과 제한.
console.log(location.origin);
콘솔을 찍어서 origin 값을 알아낼 수 있다.
접근제어에 사용되는 3가지 시나리오가 있다.
메서드
자동으로 설정되는 헤더 제외 설정할 수 있는 헤더는 다음과 같이 변경
Content-Type이 다음과 같은 경우
단순 요청이 아닌 cross-origin 요청은 모두 prefilght 요청을 한다. 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메서드를 사용하여 요청. 사용자 데이터에 영향을 미칠 수 있는 요청이므로 사전에 확인
Preflight Request
Preflight Response
인증 관련 헤더를 포함할 때 사용하는 요청이다.
클라이언트
쿠키 또는 JWT 토큰을 담아 보낼 경우 credentials : include 를 포함하여 보낸다.
서버
Access-Control-Allow-Credentials : true 해야 클라이언트의 인증 포함 요청에 허용이 가능하다.
프론트 프록시 서버 설정
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
흔히 사람들은 기회를 기다리고 있지만 기회는 기다리는 사람에게 잡히지 않는 법이다. 우리는 기회를 기다리는 사람이 되기 전에 기회를 얻을 수 있는 실력을 갖춰야 한다. 일에 더 열중하는 사람이 되어야한다. -안창호