CORS 오류

CORS (Cross-Origin Resource Sharing)

• 교차 출처 리소스 공유
• 브라우저에서 발생하는 오류

 

출처(Origin)

URL 구성

• URL에서 프로토콜(Protocol), 도메인 이름(Domain Name), 포트(Port)          ->      "출처"

 

=>  이것이 다르면 CORS 오류

 

 

다른 출처간의 통신을 막아놓은 이유는 보안 때문

 

---

 

해결 방법

1. 프론트엔드에서 해결하는 방법

Proxy 서버 설정

proxy 서버 흐름

 

브라우저와 서버간의 통신에서 출처 교차

브라우저에서 요청 -> 바로 백엔드 요청 보내는 것 X

• 브라우저에서 요청 -> 현재 프론트엔드 서버에서 요청 O
• 프론트엔드 서버 -> 백엔드 서버 요청

package.json에서 수정

"proxy": "백엔드 서버"

fetch(도메인이 생략된 형태)
fetch('/')

 

 

2. 백엔드에서 해결하는 방법

 

 

 

 

 

 

---

 

출처

https://developer.mozilla.org/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL

URL이란? - Web 개발 학습하기 | MDN