[Frontend] CORS 에러와 해결 방법

2024. 8. 17. 23:45· Frontend
목차
  1. 🐌 CORS란
  2. 🐌 CORS 에러란
  3. 🐌 해결 방법

🐌 CORS란

'교차 출처 리소스 공유'라고 불리는 CORS(cross-origin resource sharing)는 웹 브라우저가 자신의 출처가 아닌 다른 출처(도메인, 포트 등)로부터 리소스를 얻는 것을 서버가 제어하는 보안 메커니즘(정책)입니다.

- MDN Web Docs

기본적으로 웹 브라우저는 보안을 위해 동일한 출처의 리소스에만 접근할 수 있는 동일 출처 정책(same-origin policy)을 따릅니다.

이때 CORS는 동일 출처 정책을 완화하여, 서버가 허용한 경우라면 A라는 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근할 수 있도록 해줍니다.

이를 위해 서버는 반환할 응답에 특정한 http 헤더를 포함하여 웹 브라우저의 요청을 허용할지 결정합니다.

만약 다른 출처의 리소스에 대한 요청이어도 cors 정책을 준수했다면 해당 요청은 허용될 수 있습니다.

 


🐌 CORS 에러란

CORS 에러는 CORS 정책에 의해 차단된 요청을 의미합니다. 클라이언트 측 웹 페이지가 다른 출처의 리소스에 접근하려고 할 때, 해당 요청이 허용되지 않아 발생하는 에러입니다.

예를 들어, 'https://domain-a.com'의 프론트엔드 자바스크립트 코드가 fetch()를 사용하여 다른 도메인인 'https://domain-b.com/data.json'에 자원을 요청하는 경우를 말합니다.

 

cors 에러가 발생하는 상황은 다음과 같습니다.

  • 웹 브라우저가 다른 출처에서 호스팅된 API에 데이터를 요청하는 경우
  • https에서 http로 리소스를 요청하는 경우
  • 웹 페이지에서 외부 출처에 위치한 리소스를 로드하는 경우
  • 자바스크립트를 통해 XMLHttpRequest나 fetch API로 인증 정보가 포함된 요청을 보내는 경우
  • 서버가 cors 관련 헤더를 포함하지 않은 응답을 보내는 경우
  • 브라우저가 허용하지 않은 http 메서드나 커스텀 헤더가 포함된 요청을 보내는 경우
cors 에러 메시지에 대한 설명은 MDN Web Docs를 참고해주세요

 


🐌 해결 방법

1) 서버에서 cors 헤더 설정하기

가장 일반적인 방법으로 서버 측에서 cors 헤더를 설정하여 도메인에서 오는 요청을 허용하는 것이 있습니다.

다음은 허용하는 도메인을 정의하는 코드입니다.

// 모든 도메인의 요청을 허용하는 경우
Access-Control-Allow-Origin: *

// 특정 도메인(https://example.com)의 요청만 허용하는 경우
Access-Control-Allow-Origin: https://example.com

아래는 특정한 요청 메서드 또는 커스텀 된 헤더를 허용하도록 정의하는 코드입니다.

// 허용되는 메서드를 설정하는 경우
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

// 허용되는 헤더를 설정하는 경우
Access-Control-Allow-Headers: Content-Type, Authorization
// +) 브라우저가 인증 정보가 포함된 요청을 보내는 경우
Access-Control-Allow-Credentials: true

 

2) 프록시 서버 사용하기

해당 방법은 cors 에러를 우회하는 방법입니다. 

프록시 서버는 클라이언트와 타깃 서버 사이에 위치하며 모든 출처에 대한 요청 및 응답을 허용합니다.

따라서 클라이언트가 보내는 요청을 프록시 서버가 대신 타겟 서버에게전달해 주고, 받은 응답을 다시 클라이언트에게 반환해 줍니다.

 

3) 브라우저 설정 변경하기

해당 방법은 개발 환경에서만 일시적으로 cors 정책을 우회하는 방법입니다.

아래 과정을 따라가면 크롬 브라우저에서 cors 정책을 일시적으로 해제할 수 있습니다.

 

1. 터미널에서 Chrom.exe가 위치한 폴더로 이동합니다.

2. 해당 폴더에서 다음 명령어를 실행합니다.

chrome.exe --disable-web-security --user-data-dir=C:\Temp\

3. 명령어가 실행되며 나온 크롬 페이지에서 테스트를 진행합니다.

참고로 보안 문제가 발생할 수 있기 때문에 개발 환경에서만 사용해야 합니다.

 

4) 크롬 확장 프로그램 사용하기

크롬은 3번 방법과 마찬가지로 개발 환경(로컬)에서 cors 정책을 일시적으로 해결할 수 있습니다.

크롬 웹 스토어에서 'Allow CORS: Access-Control-Allow-Origin'이라는 확장 프로그램을 다운로드하면, 메뉴에서 해당 프로그램을 활성 및 비활성화시킬 수 있습니다.

 

더 자세한 내용은 다음 블로그를 참고해주세요

 


읽어주셔서 감사합니다:)

 

  1. 🐌 CORS란
  2. 🐌 CORS 에러란
  3. 🐌 해결 방법
'Frontend' 카테고리의 다른 글
  • [Frontend] 주소창에 url을 입력하면 무슨 일이 일어날까
  • [Frontend] 소셜 로그인이 이루어지는 과정(feat. OAuth, OIDC)
  • [Frontend] 세션 기반 인증과 토큰 기반 인증
  • [Frontend] 검색 엔진 최적화(SEO)의 정의와 방법
emmaOH!
emmaOH!
개발자구역emmaOH! 님의 블로그입니다.
emmaOH!
개발자구역
emmaOH!
전체
오늘
어제
  • 분류 전체보기 (70)
    • Frontend (10)
    • React (7)
    • Next.js (2)
    • Typescript (2)
    • Javascript (17)
    • HTML & CSS (13)
    • Git (4)
    • 트러블슈팅 (12)
    • etc. (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

태그

  • Frontend
  • html
  • 주석
  • React
  • 코드잇스프린트
  • 자바스크립트
  • 스프린트프론트엔드8기
  • 오블완
  • Next.js
  • 라이브러리
  • 티스토리챌린지
  • 깃
  • 취업까지달린다
  • Typescript
  • CSS
  • git
  • javascript
  • 타입스크립트
  • 리액트
  • 프론트엔드
hELLO · Designed By 정상우.v4.3.0
emmaOH!
[Frontend] CORS 에러와 해결 방법
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.