Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
47
Help us understand the problem. What is going on with this article?
@terufumi1122

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

More than 1 year has passed since last update.

はじめに

基礎から学ぶ 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:

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

47
Help us understand the problem. What is going on with this article?
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
terufumi1122
ストックついでに「いいね!」もしてもらえると嬉しいです。 HTML/CSS/JavaScript/Vue.js/Ruby/Ruby on Rails/Java/Kotlin/Android

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
47
Help us understand the problem. What is going on with this article?