[FE] CORS 오류가 나는 이유

🗣️ CORS 오류가 나는 이유에 대해 알고 계신가요?

• 의도: CORS를 이해하고, 해결 방법 또한 알고 있는지 확인하는 질문

• 팁: 기술 용어에 유의하자.

• 나의 답안

  네, CORS는 Cross-Origin Resource Sharing의 약자로, 서로 다른 출처 사이의 리소스 공유 정책을 의미합니다.
  기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 통해 웹 페이지가 로드된 출처와 다른 출처로의 요청을 제한합니다.
  그러나 실제로는 다른 출처에서 데이터를 요청해야 하는 경우가 많기 때문에 CORS를 통해 이러한 요청을 안전하게 처리할 수 있습니다.

  CORS 오류는 브라우저가 보안상의 이유로 요청을 차단할 때 발생합니다.
  예를 들어, A 도메인에서 B 도메인으로 API 요청을 시도할 때, B 도메인 서버가 적절한 CORS 헤더를 포함하지 않으면 브라우저는 해당 요청을 차단합니다.
  이때 발생하는 오류가 CORS 오류입니다.
  CORS 오류는 서버에서 CORS 헤더를 설정하지 않거나 잘못된 CORS 헤더를 설정했을 때, 그리고 Preflight 요청이 실패한 경우에 발생합니다.

  CORS 오류를 해결하는 다양한 방법이 있습니다.
  가장 기본적인 방법은 서버 측에서 클라이언트의 요청을 허용하도록 Access-Control-Allow-Origin 헤더를 설정하는 것입니다.
  모든 도메인에서 접근을 허용하려면 Access-Control-Allow-Origin 속성에 * 값을 넣어주면 되고, 특정 도메인만 허용하려면 값 부분에 해당 도메인을 명시하면 됩니다.
  또 다른 방법으로, 서버 사이드 프록시를 사용하는 방법이 있습니다.
  서버 측에서 클라이언트 요청을 프록시하고, 서버 측에서 CORS 정책을 적용하여 클라이언트가 직접 다른 도메인에 요청을 보내지 않도록 할 수 있습니다.
  마지막으로, Preflight 요청을 처리하는 방법입니다.
  이 방법은 서버가 OPTIONS 메서드의 Preflight 요청을 적절히 처리하고, 필요한 CORS 헤더를 포함하도록 합니다.

• 제공된 답안 (모범 답안)

  네, CORS는 모든 프론트엔드 개발자가 한 번쯤은 겪어볼 정도로 흔한 문제라고 생각합니다.
  CORS는 Cross-Origin Resource Sharing의 약자로, 서로 다른 출처 사이의 리소스 공유 정책을 의미합니다.
  자세히 설명하자면, 서로 다른 도메인 간에 데이터를 주고받을 때 발생하는 오류입니다.

  서로 다른 도메인이라는 말이 나왔을 때부터 브라우저의 Same Origin Policy, 즉 동일 출처 정책을 설명해야 하는데요.
  이 정책에 따르면 동일한 출처끼리만 데이터를 주고받을 수 있다는 뜻입니다.
  그러면 결국 CORS는 이 동일 출처 정책 때문에 나타나는 오류라는 것입니다.
  그래서 서로 다른 출처에서 데이터를 주고받을 때 CORS 에러를 마주치게 됩니다.

  여기에는 이미 해결 방법이 있습니다.
  바로 일종의 화이트 리스트인 Access-Control-Allow-Origin 헤더를 설정하여 미리 일러둔 출처끼리는 데이터의 공유를 할 수 있도록 허가해주는 것입니다.
  저도 웹 서비스를 구축할 때 비슷한 오류를 겪어본 적이 있었기에 다음에는 이런 오류를 겪지 말자라는 차원에서 스스로 공부하고 정리했던 경험이 있어 그때 공부했던 내용을 바탕으로 답변드렸습니다.

---

📝 개념 정리

🌟 CORS란?

• 웹 브라우저에서 보안상의 이유로 도메인 간 요청을 제어하는 메커니즘이다.

• 기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 통해 웹 페이지가 로드된 출처와 다른 출처로의 요청을 제한한다.

• 그러나 실제로는 다른 출처에서 데이터를 요청해야 하는 경우가 많기 때문에 CORS를 통해 이러한 요청을 안전하게 처리할 수 있다.

---

🌟 CORS 오류란?

• 브라우저가 보안상의 이유로 요청을 차단할 때 발생한다.

• 예를 들어, A 도메인에서 B 도메인으로 API 요청을 시도할 때, B 도메인 서버가 적절한 CORS 헤더를 포함하지 않으면 브라우저는 해당 요청을 차단한다.

• 이때 발생하는 오류가 CORS 오류이다.

---

🌟 CORS 오류 발생 원인

1. 서버에서 CORS 헤더를 설정하지 않은 경우

   • 클라이언트가 다른 출처의 서버로 요청을 보낼 때, 서버가 응답에 CORS 헤더(Access-Control-Allow-Origin)를 포함하지 않으면 브라우저는 이 요청을 차단한다.

2. 잘못된 CORS 헤더를 설정한 경우

   • 서버가 설정한 CORS 헤더가 올바르지 않거나, 요청 메서드(GET, POST 등)나 헤더의 허용 설정이 부족하면 CORS 오류가 발생할 수 있다.

3. Preflight 요청이 실패한 경우

   • CORS 요청이 OPTIONS 메서드를 사용하는 Preflight 요청을 요구하는 경우, 서버가 이 요청에 적절히 응답하지 않으면 CORS 오류가 발생할 수 있다.

---

🌟 CORS 해결 방법

1. 서버 측에서 CORS 헤더 설정

   • 서버가 클라이언트의 요청을 허용하도록 Access-Control-Allow-Origin 헤더를 설정한다.

   • 모든 도메인에서 접근을 허용하려면 다음과 같이 설정할 수 있다.

     Access-Control-Allow-Origin: *

   • 특정 도메인만 허용하려면 해당 도메인을 명시한다.

     Access-Control-Allow-Origin: https://example.com

2. 다른 CORS 관련 헤더 설정

   • Access-Control-Allow-Methods : 허용하는 HTTP 메서드를 설정한다.

     Access-Control-Allow-Methods: GET, POST, PUT, DELETE

   • Access-Control-Allow-Headers: : 클라이언트가 요청에 사용할 수 있는 헤더를 설정한다.

     Access-Control-Allow-Headers: Content-Type, Authorization

   • Access-Control-Allow-Credentials : 자격 증명(쿠키 등)을 포함한 요청을 허용할지 여부를 설정한다.

     Access-Control-Allow-Credentials: true

3. Preflight 요청 처리

   • 서버가 OPTIONS 메서드의 Preflight 요청을 적절히 처리하고, 필요한 CORS 헤더를 포함하도록 한다.

   • Preflight 요청

     • CORS(Cross-Origin Resource Sharing) 규칙에 따라 브라우저가 실제 요청을 보내기 전에 서버가 해당 요청을 허용하는지 확인하기 위해 보내는 사전 요청이다.

     • 이 요청은 보통 HTTP 메서드가 GET, POST, HEAD가 아닌 경우나 커스텀 헤더가 포함된 경우에 발생한다.

     • Preflight 요청은 HTTP OPTIONS 메서드를 사용하여 서버에게 실제 요청의 메서드와 헤더들을 알려주고, 서버는 이를 허용할지 여부를 응답한다.

4. 서버 사이드 프록시 사용

   • 서버 측에서 클라이언트 요청을 프록시하고, 서버 측에서 CORS 정책을 적용하여 클라이언트가 직접 다른 도메인에 요청을 보내지 않도록 할 수 있다.