본문 바로가기

👩‍🌾 도비의 농장/🪚 삽질 일기

CORS Error

??? 서버 ip + /api/v1/~~

 

get 요청을 보냈는데 오류를 얻었다

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

 

 

1. CORS

Cross Origin Resource Sharing

 

Origin = url 주소상에서 프로토콜, Domain 이름, 포트까지 포함

로컬에 띄운 http://localhost:5500 이 Origin

 

Cross Origin Resource Sharing = 서로 다른 Origin 간의 리소스 교환!!

 

 

2. CORS Error

Same Origin 의 경우 요청이 오는 곳 / 처리하는 곳이 동일해서 보안상 처리해줄 이유 X

 

브라우저에서 결과의 헤더 값을 통해 CORS 확인

브라우저에서는 서버에서 전달 받은 응답 중 헤더에  Access-Control-Allow-Origin 값을 확인하고

이 값에 현재 Origin이 포함되는지 확인

 

포함 O -> CORS 수행

포함 X -> 에러

 

 

3. CORS Solution

 

Access-Control-Allow-Origin 전체 허용

백엔드에서 모든 주소를 Access-Control-Allow-Origin 으로 주면 해결 가능..

 

배포용으로 적절한 방법이 아님

브라우저가 CORS 방어를 해줄 수 X > 보안 취약

>>> 특정 도메인만 추가해서 사용하는 것 추천

 

>>> 프록시 서버 사용하기

브라우저가 보낸 요청을 프론트엔드에서 받아서 대신 보내는 방법

서버 간 데이터 교환상에서는 CORS가 이루어지지 않기 때문에

 

프론트 서버에서 받은 정보를 브라우저에 업데이트