【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した

6381 ワード
CORS 初心者 Ajax 初心者 テキストリンク

はじめに

基礎から学ぶ 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/にアクセス

以上です！

おわりに

最後まで読んで頂きありがとうございました

http-serverはサクッと使えて学習用途に便利ですね

参考にさせて頂いたサイト（いつもありがとうございます）