CORS 오류를 수정하는 방법

by

CORS 오류를 수정하는 방법

CORS 오류는 웹 브라우저에서 실행되는 클라이언트 측 코드가 다른 출처(도메인, 프로토콜, 포트)의 리소스에 액세스할 때 발생하는 보안 정책입니다.
이를 해결하기 위해서는 수신측과 송신측 모두에 서버측을 구성해야 합니다.

서버 측에서 HTTP 응답 헤더를 사용하여 다른 출처의 요청을 허용하는 출처를 지정할 수 있습니다.
이를 통해 클라이언트 측 코드는 다른 소스의 리소스에 안전하게 액세스할 수 있습니다.

  1. 서버 측에서 액세스 제어 허용 원본 헤더를 설정합니다.
    • 이 헤더는 클라이언트 측에서 요청되는 원본을 지정하여 허용할 원본을 지정합니다.
    • 모든 출처를 허용하려면: 액세스 제어 허용 원본: *설정.
  2. 서버 측에서 액세스 제어 허용 방법 헤더를 설정합니다.
    • 이 헤더는 클라이언트 측에서 수락할 HTTP 메서드를 지정합니다.
      예를 들어, 가져오기, 게시, 넣기, 삭제 등등.
  3. 서버 측에서 액세스 제어 허용 헤더 헤더를 설정합니다.
    • 이 헤더는 클라이언트 측에서 요청할 수 있는 HTTP 헤더를 지정합니다.
  4. 서버 측에서 인증 기능을 사용하는 경우, 액세스 제어 허용 자격 증명 헤더를 설정합니다.
    • 이 헤더를 사용하면 클라이언트 측에서 쿠키와 같은 인증 정보를 보낼 수 있습니다.

서버 측에서 이러한 설정을 완료한 후 클라이언트 측은 보안상의 이유로 JavaScript에서 직접 HTTP 요청을 보낼 수 없습니다.
대신 AJAX 요청을 보낼 때 withCredentials 옵션을 설정하여 인증 정보와 함께 요청을 보내야 합니다.

CORS가 서버 측에 구성되지 않은 경우 웹 브라우저에서 CORS 오류가 발생합니다.
이 시점에서 개발자 도구의 네트워크 탭을 확인하여 누락된 헤더를 확인할 수 있습니다.
이를 사용하여 서버 측에서 필요한 헤더를 설정할 수 있습니다.

'추천 관련글,