배경
XMLHttpRequest를 이용하여 Json 파일을 읽어 들이는 기능 개발시 구현 확인을 위한 실행시 CORS와 관련된 오류가 발생하였다.
원인
CORS ?
CORS(Cross Origin Resource Sharing)는 교차 출처 리소스 공유이다. 이는 브라우저에서 발생하는 에러이다. 브라우저는 동일 출처 정책(Same Origin Policy)를 지키며 운용되고 있는데, 이 정책에는 다른 출처의 리소스 접근을 금지하고 있다.
해결
필자는 보통 Chrome 브라우저를 사용한다. JavaScript를 공부할 때에도 자연스럽게 Chrome 브라우저를 사용하여 결과를 확인하고 있다. 아래에는 Chrome 브라우저를 사용시 CORS 에러를 해결하는 방법이다.
Chrome 브라우저 설정 변경
Chrome 브라우저 실행시 몇가지 옵션을 추가해주면 CORS 에러를 해결(?)한 뒤 페이지를 확인할 수 있다. 이를 기본적으로 고정시켜놓기 위해 Chrome의 속성 페이지에서 [바로 가기] - [대상] 칸의 정보를 아래와 같이 변경해준다.
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/tmp
그 결과, 아래와 같이 json을 읽어 html 파일에서 정상적으로 출력되는 것을 확인 할 수 있다.
html 파일내에서 json 읽어 출력하기
개요 html 파일에서 local의 json 파일을 읽어 웹 페이지에 출력하고자 한다. 내용 Json 파일 [ { "name" : "Messi", "birth" : "1987-06-24", "nation" : "Argentina" }, { "name" : "Mbappé", "birth" : "1998-12-20", "nation" : "France" }
jaywapp.tistory.com
Chrome Extension 이용
구글링을 해보니까 아래의 Extension을 추가하여 사용하면 이를 해결할 수 있다고는 하는데, 팔자의 경우는 브라우저 설정을 변경하여 사용하였다. 자세한 내용은 아래 링크를 통해 확인할 수 있다.
Moesif Origin & CORS Changer
This plugin allows you to send cross-domain requests. You can also override Request Origin and CORS headers.
chrome.google.com
'Software Develop > 문제해결' 카테고리의 다른 글
| [C#] DataGrid로 DataTable 출력시 일부 cell이 없어지는 경우 (0) | 2023.01.30 |
|---|---|
| [C#] FileNotFoundException 발생 (0) | 2023.01.16 |
| [VisualStudio] Visual Studio 중단점 (Break Point) (0) | 2022.11.01 |