【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에서 액세스하여 해결합니다.

    해결



    이번은 순식간에 서버 구축할 수 있다 http-server 를 사용했습니다.

    ※대상 파일이 있는 디렉토리에서 명령 실행.
    $ npm install -g http-server
    


    $ http-server
    



    http://localhost-8080.com/ 방문

    이상입니다!

    결론



    끝까지 읽어 주셔서 감사합니다

    http-server는 바삭바삭하게 사용할 수 있어 학습 용도에 편리하네요

    참고로 한 사이트 (항상 감사합니다)


  • 기초에서 배우기 Vue.js
  • Reason: CORS request not HTTP - HTTP | MDN
  • CHAPTER 2 | 기초에서 배우기 Vue.js
  • 좋은 웹페이지 즐겨찾기