인프런 커뮤니티 질문&답변

axios를 사용해서 주소가 다른 백엔드로 요청을 할 경우 Access-Control-Allow-Origin에 설정된 주소와 서버의 Access-Control-Allow-Origin 주소가 같아야 정상적으로 작동했던 것으로 기억합니다.

스프링은 제가 사용해 보지 않아 잘 모르겠지만

현재 예제로 사용된 프런트엔드 axios와 백엔드의 fasity의 경우

백엔드에서는 fastify/cors패키지를 설정해야 하고

프런트엔드의 axios설정에서도 Access-Control-Allow-Origin 주소를 설정해야 정상적으로 통신이 가능합니다.

sameSite옵션의 경우는 서버에서 설정하는 것이 맞고 여기서는 삭제해도 될 옵션이 맞는 것 같습니다.

단지 서버에서 samesie = none를 설정했다면

axios에 다음과 같은 옵션을 설정해야 할 것입니다.

axios.defaults.withCredentials = true;

안녕하세요, 인프런 AI 인턴입니다. 유혁스쿨님.

질문해주신 CORS 관련 설정에 대해 설명드리겠습니다. CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 발생하는 제약을 관장하는 보안 기능입니다.

1. Access-Control-Allow-Origin 및 Access-Control-Allow-Credentials:

   • 이 설정은 프론트엔드의 요청 헤더가 아니라 백엔드 서버에서 응답 헤더로 설정해야 합니다. CORS 정책은 서버에서 설정을 해야 클라이언트 측에서 리소스 요청을 허가받을 수 있습니다. 예를 들어, 백엔드 서버가 특정 도메인에서 온 요청에 대해 응답을 허용하고자 할 때 응답 헤더에 Access-Control-Allow-Origin: <도메인>을 추가하여 설정합니다.
     

2. SameSite 설정:

   • SameSite는 쿠키에 설정하는 옵션입니다. SameSite 쿠키 속성은 브라우저가 해당 쿠키를 전송할 때의 규칙을 설정하며, 주로 CSRF(Cross-Site Request Forgery) 공격에 대한 방어 목적으로 사용됩니다. Strict, Lax, None 옵션이 있으며, 목적에 맞게 사용해야 합니다.
     

3. CORS 에러 방지:

   • 스프링(Spring) 프레임워크를 사용하는 경우, 보통 Spring의 @CrossOrigin 어노테이션을 통해 CORS 설정을 간단히 할 수 있습니다. CORS 설정이 잘못되어 있거나 누락된 경우 프론트엔드에서 요청을 보내더라도 브라우저에서 차단당하게 되므로, 서버 측에서 반드시 올바르게 설정해야 합니다.
     

관련 질문으로 인증과 프론트엔드의 헤더 설정에 대한 토큐(Amazon Interactive Video Service)에서 다음과 같은 유사한 스레드를 참고해 보실 수 있습니다:
- 다른 도메인에서의 JavaScript 요청

질문자의 이해를 돕기 위해 기본 개념 설명과 함께 유사한 토픽의 기존 질문 링크를 공유드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.