【Ajax】 로컬 파일을 읽으려고하면 CORS 오류가 발생하여 해결되었습니다.

소개

기초로부터 배우는 Vue.js(통칭：고양이 책)에서 학습하는 동안 다음과 같은 오류가 발생하여 해결 방법을 남겨 둡니다.

Access to XMLHttpRequest at 'file:///〇〇' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

이 기사가 도움이 되는 분

위의 오류로 곤란한 사람

이 기사의 장점

CORS 에러를 로컬 서버 구축으로 해결할 수 있다

환경

- OS: macOS Catalina 10.15.1
- zsh: 5.7.1
- Vue.js: 2.6.10
- axios: 0.19.0
- Chrome: 78.0.3904.108（Official Build） （64 ビット）
- Firefox: 71.0(64ビット)

발생한 오류

Chrome 검증 도구의 경우.

Access to XMLHttpRequest at 'file:///〇〇' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Firefox 개발 도구의 경우.

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、file:///〇〇 にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が http でない)。

Firefox의 경우 위의 오류 문 다음에 자세한 링크가 붙었습니다.
※mozilla의 사이트에 링크하기 위해인지, Chrome에서는 나오지 않았기 때문에 친절! .

Reason: CORS request not HTTP - HTTP | MDN

오류 원인

Firefox로 표시된 상세 링크을 클릭하면,

CORS 요청은 URL 체계가 HTTPS 인 경우에만 사용할 수 있지만 요청에 지정된 URL이 다른 유형입니다. 이것은, 로컬 파일을 지정하는 URL 가, file:///의 URL 를 사용하고 있는 경우에 자주 발생합니다.

이 문제를 해결하려면 CORS에 대한 요청을 단순히 발행할 때 HTTPS URL을 사용해야 합니다.

라는 것.

CORS란 무엇인가? 라는 설명은 같은 MDN에서 자세하게 설명되어 있습니다. (이하 링크)
오리진 간 리소스 공유(CORS) - HTTP | MDN

해결을 위한 옵션

고양이 책의 "코드 & 동작 데모"페이지에도 자세한 내용이 쓰여졌습니다.
CHAPTER 2 | 기초에서 배우기 Vue.js

HTML 파일을 "file://"스키마를 사용하여 브라우저에서 열면 보안 문제로 인해 오류가 발생합니다. 다음과 같은 방법을 시도해 보세요.

파일을 적절한 호스팅 서버에 업로드하고 호출합니다.

XAMPP나, Docker의 「hello-world-nginx」등을 이용해 localhost 등으로 호출한다.

myjson.com과 같은 서비스를 이용하는 것도 쉽습니다.

Chrome의 경우 --allow-file-access-from-files 옵션을 사용하여 브라우저를 시작합니다. ※ 보안상, 이 옵션을 붙인 채로 통상의 브라우징은 하지 말아 주세요

브라우저를 노가드로 만들 용기가 없었기 때문에 이번에는 로컬 서버를 시작하고 localhost에서 액세스하여 해결합니다.