본문 바로가기
리액트 공부와 함께 하는 일상/4주차

[TIL] 4주차 - 3. CORS (Cross-Origin Resource Sharing)

by fefe94 2022. 2. 7.

CORS (Cross-Origin Resource Sharing)




오픈 api를 사용하다 보면 cors 에러가 발생하여 리소스 값들을 가져 오지 못하는 경우가 있습니다.
cors에서 origin주소 값을 뜻하며 사이트 주소(네이버 주소 같은 것.)가 됩니다.
어디서 출발한지를 나타내며 요청 출발지에 해당됩니다.

예를 들어,
네이버에서 카카오로 요청을 하게 됩니다.
그러면 네이버라는 오리진에서 카카오로 요청을 하게 되는 것입니다.
이 때 오리진이 크로스 됩니다. 네이버에서 네이버로 요청을 해야지 왜 카카오로 요청하느냐 는 식입니다.

api 요청 시 기본적으로 크로스된 상태에서 리소스를 허용할 수 없습니다.
백엔드에서 허용해야 리소스 값을 받을 수 있습니다.

이 때 우회적인 방법으로 api 데이터 값을 받아올 수 있습니다.
또 다른 백엔드를 이용하는 것입니다.
이 백엔드에서 요청을 하면 받아와 집니다.
실제적으로 막는 것은 크롬 같은 브라우저이고
백엔드는 브라우저가 아니기 때문에 리소스를 받아올 수 있습니다.

이렇게 받아와준 백엔드에서 허용함을 붙여줄 수 있습니다.
이런 식으로 우회해서 오픈 api로부터 리소스를 받을 수 있게 되는데 이를
프록시 서버라고 합니다.

리액트 네이티브에서 사용하는 모바일 역시 브라우저가 아니기 때문에
오픈 api에 요청 시 값을 받아올 수 있습니다.



cors:true 설정을 하면
오리진이 달라도 리소스를 받을 수 있게 할 수 았다


댓글