1. terufumi1122

    Posted

    terufumi1122
Changes in title
+【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,99 @@
+## はじめに
+[基礎から学ぶ Vue.js(通称:猫本)](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453/ref=as_li_ss_tl?SubscriptionId=AKIAJHZKRQV6NN3MBEUQ&linkCode=sl1&tag=cubix-22&linkId=3b2923e7c205b374c15b2e75bd173305)で学習中、以下のようなエラーに遭遇したので解決法を残します。
+
+```shell
+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エラーをローカルサーバー構築で解決出来る
+
+## 環境
+```yaml
+- 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の検証ツールの場合。
+
+```shell
+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の開発ツールの場合。
+
+```shell
+クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、file:///〇〇 にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が http でない)。
+```
+
+Firefoxの場合は上記エラー文の後に**詳細リンク**がついていました。
+※mozillaのサイトへリンクするためか、Chromeでは出てくれなかったので**親切!**。
+
+[Reason: CORS request not HTTP - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp)
+
+## エラー原因
+Firefoxで示された[詳細リンク](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp)をクリックすると、
+> CORS リクエストは URL スキームが HTTPS の場合のみ利用できますが、リクエストで指定された URL が異なる種類のものです。これは、ローカルファイルを指定する URL が、 file:/// の URL を使用している場合によく起こります。
+
+> この問題を修正するには、単純に CORS に関するリクエストを発行する際に HTTPS の URL を使用するようにしてください。
+
+とのこと。
+
+CORSとは何か?という説明は同MDNにて詳しく説明されています。(以下リンク)
+[オリジン間リソース共有 (CORS) - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
+
+## 解決のための選択肢
+猫本の「コード&動作デモ」ページにも詳細が書かれていました。
+[CHAPTER 2 | 基礎から学ぶ Vue.js](https://cr-vue.mio3io.com/guide/chapter2.html#%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)
+
+> HTML ファイルを 「file://」 というスキームを使ってブラウザで開いている場合、セキュリティの問題でエラーになります。 次のような方法をお試しください。
+
+> ファイルを適当なホスティングサーバーにアップロードして呼び出す。
+
+> XAMPP や、Docker の「hello-world-nginx」などを利用して localhost などで呼び出す。
+
+> myjson.com のようなサービスを利用するのもお手軽です。
+
+> Chrome なら --allow-file-access-from-files オプションを付けてブラウザを起動してください。 ※ セキュリティ上、このオプションを付けたまま通常のブラウジングはしないでください
+
+ブラウザを**ノーガード**にする勇気はなかったので、今回は**ローカルサーバーを立ち上げ**、localhostからアクセスすることで解決します。
+
+## 解決
+
+今回は一瞬でサーバー構築出来る[http-server](https://github.com/http-party/http-server)を使いました。
+
+※対象ファイルがあるディレクトリでコマンド実行。
+
+```shell
+$ npm install -g http-server
+```
+
+
+```shell
+$ http-server
+```
+
+
+[http://localhost:8080/](http://localhost:8080/)にアクセス
+
+以上です!
+
+
+
+## おわりに
+最後まで読んで頂きありがとうございました:bow_tone1:
+
+**http-server**はサクッと使えて学習用途に便利ですね:relaxed:
+
+## 参考にさせて頂いたサイト(いつもありがとうございます)
+- [基礎から学ぶ Vue.js](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453/ref=as_li_ss_tl?SubscriptionId=AKIAJHZKRQV6NN3MBEUQ&linkCode=sl1&tag=cubix-22&linkId=3b2923e7c205b374c15b2e75bd173305)
+- [Reason: CORS request not HTTP - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp)
+- [CHAPTER 2 | 基礎から学ぶ Vue.js](https://cr-vue.mio3io.com/guide/chapter2.html#%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)