인프런 커뮤니티 질문&답변
작성한 질문수
프론트 api.js의 요청 headers 옵션의 cors 관련 설정 질문
작성
·
17
0
프론트엔드 api.js의 Access-Control-Allow-Origin 혹은 Access-Control-Allow-Credencials 옵션은 프론트의 요청 헤더가 아닌 백엔드 서버에서 응답 헤더로 설정해야 하는것 아닌지 질문드립니다.
추가적으로 SameSite는 쿠키에 설정하는것이 아닌지 질문드립니다.
보통 강의와 같이 요청 헤더에 저렇게 설정하면
Spring 기준으로는 Filter에서 Origin이나 Credencials를 직접 꺼내서 응답 헤더에 넣어주는 형태로 하지 않는이상 CORS 에러를 방지할수 없었던것으로 기억되어서 질문드립니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 유혁스쿨님.
질문해주신 CORS 관련 설정에 대해 설명드리겠습니다. CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 발생하는 제약을 관장하는 보안 기능입니다.
Access-Control-Allow-Origin 및 Access-Control-Allow-Credentials:
- 이 설정은 프론트엔드의 요청 헤더가 아니라 백엔드 서버에서 응답 헤더로 설정해야 합니다. CORS 정책은 서버에서 설정을 해야 클라이언트 측에서 리소스 요청을 허가받을 수 있습니다. 예를 들어, 백엔드 서버가 특정 도메인에서 온 요청에 대해 응답을 허용하고자 할 때 응답 헤더에
Access-Control-Allow-Origin: <도메인>을 추가하여 설정합니다.
- 이 설정은 프론트엔드의 요청 헤더가 아니라 백엔드 서버에서 응답 헤더로 설정해야 합니다. CORS 정책은 서버에서 설정을 해야 클라이언트 측에서 리소스 요청을 허가받을 수 있습니다. 예를 들어, 백엔드 서버가 특정 도메인에서 온 요청에 대해 응답을 허용하고자 할 때 응답 헤더에
SameSite 설정:
SameSite는 쿠키에 설정하는 옵션입니다.SameSite쿠키 속성은 브라우저가 해당 쿠키를 전송할 때의 규칙을 설정하며, 주로 CSRF(Cross-Site Request Forgery) 공격에 대한 방어 목적으로 사용됩니다.Strict,Lax,None옵션이 있으며, 목적에 맞게 사용해야 합니다.
CORS 에러 방지:
- 스프링(Spring) 프레임워크를 사용하는 경우, 보통 Spring의
@CrossOrigin어노테이션을 통해 CORS 설정을 간단히 할 수 있습니다. CORS 설정이 잘못되어 있거나 누락된 경우 프론트엔드에서 요청을 보내더라도 브라우저에서 차단당하게 되므로, 서버 측에서 반드시 올바르게 설정해야 합니다.
- 스프링(Spring) 프레임워크를 사용하는 경우, 보통 Spring의
관련 질문으로 인증과 프론트엔드의 헤더 설정에 대한 토큐(Amazon Interactive Video Service)에서 다음과 같은 유사한 스레드를 참고해 보실 수 있습니다:
- 다른 도메인에서의 JavaScript 요청
질문자의 이해를 돕기 위해 기본 개념 설명과 함께 유사한 토픽의 기존 질문 링크를 공유드립니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.