웹서버에 있는 데이터를 fetch 하는 것에 대해 질문드립니다.

Question

안녕하세요.어쩌면 아주 기본적인 질문일 것 같은데,일반 브라우저에서 주소입력창에 직접 해당 웹서버의 JSON 파일 경로를 입력하면 곧바로 해당 JSON 의 내용을 볼 수 있는데React 를 통해 개발중인 웹페이지에서 fetch 를 통해 웹서버 JSON 파일 경로를 fetch 하면 CORS 가 뜹니다.웹브라우저에서 CORS를 띄우는 것으로 알고 있는데 이렇게 CORS 를 띄우는 것은 웹페이지에서 자바스크립트를 통해 다른 도메인의 데이터를 요청할 때에만 띄우는 것일까요??그리고 또, 안드로이드나 C# 개발 때에는 바로 받아와졌는데 왜 곧바로 데이터를 가져올 수 있을까요? 주소입력창을 통한 것과, fetch 를 통한 것, 안드로이드, C# 등이 왜 다른 결과를 보여주는 지 잘 이해가 안가 조심스럽게 물어봅니다. 감사합니다!

kiroki · Accepted Answer

CORS의 요점은 어떤 도메인에서 다른 도메인으로 HTTP요청을 하지 못하게 하는 것입니다.이유는 보안때문이구요1. 일반 브라우저에서 주소입력창에 직접 리소스 주소 입력 도메인에서 다른 도메인으로 요청한 것이 아니라 하나의 도메인만 사용했으므로 CORS 정책 위반 아님2. fetch 요청을 보낸 도메인과 받는 도메인이 다른 경우 CORS 정책 위반3. Native App(Mobile, C# 등등) 네이티브 앱은 어떤 도메인이 로드된 페이지가 있는 것이 아니기 때문에 CORS 정책을 위반한 것도 아니고 필요하지도 않습니다. 실제로 네이티브 앱의 HTTP 함수는 프리플라이트(서버에게 CORS 이슈가 있는지 HTTP 요청전에 먼저 날리는 요청)를 사용하지도 않습니다

바람종 · Answer

브라우저의 보안정책입니다.예를 들어...제가 A라는 사이트의 글 작성 API와 구조를 알아냈습니다.제가 B라는 사이트를 만들어서 접속하면 A사이트의 글 작성 API를 호출하게 만들고B라는 사이트에 접속하게 유도를 합니다.이렇게하면.. B라는 사이트에 접속한사람은 자기도 모르게 원하지 않는 글을 작성할 수도 있는 것이죠...길게 설명했지만 CSRF에 해당되는 내용입니다.(https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%9A%94%EC%B2%AD_%EC%9C%84%EC%A1%B0)위와 같은 문제 때문에브라우저는 SOP를 원칙으로 합니다.동일한 출처의 도메인의 요청만 fetch가 가능하도록 말이죠하지만 이렇게 하면 불편한 점이 많기 때문에 예외를 둔것이CORS Policy입니다.특정 조건을 만족하면 다른 사이트더라도 요청이 가능하도록 하게 하는 것이죠.(서버에서 허용된 도메인을 명시해주는 형태...)이렇게 되면 우리가 안전하다고 명시한 사이트에서만 실행이 되기 때문에 위에 말씀 드린 문제가 생기진 않겠죠.기술적인 제한이라기보다는보안 정책이고 약속이라는 점 강조드리고 싶네요.

토끼왕 · Answer

브라우저에 직접 요청하면 = 같은 도메인자바스크립트로 요청하면 = 다른 도메인CORS 정책 = 다른 도메인은 기본적으로 차단

웹서버에 있는 데이터를 fetch 하는 것에 대해 질문드립니다.

3개의 답변

Q&A 목록