Help us understand the problem. What is going on with this article?

【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/にアクセス

以上です!

おわりに

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

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

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

terufumi1122
小売業経験8年。異業種から未経験・完全独学でサーバーサイドエンジニアになった人。 ストックついでに「いいね!」もしてもらえると嬉しいです。 HTML/CSS/JavaScript/Vue.js/Ruby/Ruby on Rails #駆け出しエンジニアとつながりたい #元転勤族
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした