jpa강의 듣기
ci/cd 강의 듣기
-배포가 안되는 에러가 발생하는데 왜때문인지 모르겠음 구글링해도 잘 안나오고 설정에 오류가 있는건가 싶어서 다음에 다시 처음부터 해 볼 생각임
키워드 공부하고 정리도 해야하고 책도 읽어야하는데 강의도 많이 밀려서 약간 촉박함이 생겨벌임ㅎ
잇몸프론트엔드
강의 들으면서 나온 내용 정리
CORS
교차 출처 리소스 공유 (Cross-origin resource sharing)
다른 출처의 리소스 공유에 대한 허용/비허용 정책
예외 사항을 두기 위해 CORS 정책을 허용하는 리소스에 한해 다른 출처라도 받아들인다는 것
SOP(Same-Origin Policy)이란 같은 출처에서만 리소스를 공유할 수 있다는 규칙. 브라우저에서 다른 서버에서 요청할 경우에 해당되고, 브라우저를 거치지 않고 서버 간 통신을 할 때는 이 정책이 적용되지 않는다.
자바스크립트에서의 요청은 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한한다.
*origin : Protocol + Host + Port (url)
이 세가지가 같다면 동일 출처(Same-origin)로 판단
브라우저에서 cors 기본동작
1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달. 요청 헤더에 Origin 이라는 필드에 출처를 함께 담아 보냄
2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다. 값으로 '이 리소스를 접근하는 것이 허용된 출처'를 내려보낸다.
3. 클라이언트에서 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한 후 차단할지 말지를 결정한다.
만약 유효하지 않다면 그 응답을 사용하지 않고 버린다. (CORS 에러 !!)
-> cors는 서버의 허용이 필요. 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 되는 것
cors 동작방식 - 세 가지 시나리오
사전 요청(Preflight Request)
브라우저 요청 = 예비요청 + 본요청(xhr)
본격적인 교차 출처 HTTP 요청 전에 서버 측에서 그 요청의 메서드와 헤더에 대해 인식하고 있는지를 체크하는 것.
HTTPHeader("Access-Control-Request-Method"),
HTTPHeader("Access-Control-Request-Headers"),
HTTPHeader("Origin")
총 3가지의 HTTP request headers를 사용 HTTP 메서드 OPTIONS 요청 ->
서버: 이 예비 요청에 대한 응답 헤더 정보를 담아서 브라우저로 보내줌
Access-Control-Allow-Origin 허용되는 Origin들의 목록
Access-Control-Allow-Methods 허용되는 메소드들의 목록
Access-Control-Allow-Headers 헤더들의 목록
Access-Control-Max-Age 해당 예비 요청이 브라우저에 캐시 될 수 있는 시간을 초 단위로 설정
단순 요청 (Simple Request)
예비 요청(Prefilght)을 생략하고 바로 서버에 직행으로 본 요청을 보낸 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin 헤더를 보내주면 브라우저가 CORS정책 위반 여부를 검사하는 방식
다음 조건을 충족해야함
- 요청의 메소드는 GET, HEAD, POST 중 하나
Accept,Accept-Language,Content-Language,Content-Type,DPR,Downlink,Save-Data,Viewport-Width,Width헤더일 경우- Content-Type 헤더가
- application/x-www-form-urlencoded,
- multipart/form-data,
- text/plain 중 하나
아닐 경우 예비 요청으로 동작된다.
인증된 요청 (Credentialed Request)
인증 관련 헤더를 포함할 때 사용하는 요청. 자격 인증 정보란 세션 ID가 저장되어있는 쿠키(Cookie) 혹은 Authorization 헤더에 설정하는 토큰 값 등을 일컫는다.
클라이언트에서 인증 정보를 보내도록 설정
credentials 옵션 : 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션
- omit : 절대로 cookie 들을 전송하거나 받지 않는다.
- same-origin : 동일 출처(same origin)이라면, user credentials (cookies, basic http auth 등..)을 전송한다. (default 값)
- include : cross-origin 호출이라 할지라도 언제나 user credentials (cookies, basic http auth 등..)을 전송한다.
서버에서 인증된 요청에 대한 헤더 설정
응답의 Access-Control-Allow-Origin 헤더가 와일드카드(*)가 아닌 분명한 Origin으로 설정, Access-Control-Allow-Credentials 헤더는 true로 설정
// 스프링 서버 전역적으로 CORS 설정
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080", "http://localhost:8081") // 허용할 출처
.allowedMethods("GET", "POST") // 허용할 HTTP method
.allowCredentials(true) // 쿠키 인증 요청 허용
.maxAge(3000) // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
}
}reference
https://ingg.dev/cors/
https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F
