「JavaScriptファイルにて、JSON形式でデータを読み取り、それを配列データと使いたいけど、エラーが出て、うまく読み込めない…」
このような経験がある人はいませんか？
私も過去にこのような経験があり、エラーを解消するまで、とても時間がかかってしまいました…。
Access to script at ” from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
「うん、どういうこと」というところから、躓いておりましたね（笑）
色々調べた結果、どうにかJSON形式のデータを配列として受け取ることができた時の解決方法などをまとめました。
前提
目的：HTMLサイトで表示する複数のテキストをJSON形式で受け取り、JavaScript側で、配列として格納したい
経緯：JavaScriptの学習のため
ブラウザ：Chrome
エディタ：VS Code
解決策：VS Codeの拡張機能「Live Preview」を使って、ローカルサーバー経由でアクセスすると、エラーが解消された
VS Codeで書いていたので、VS Codeの拡張機能「Live Preview」を使い、http://127.0.0.1:ポート番号/index.htmlで確認。
ローカルサーバーを立てれば良いので、Node.jsのhttp-severモジュールを使用してもOK。
原因：CORSポリシーによってブロックされているからうまくいかない・・・
▼エラー
Access to script at ” from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
和訳すると
オリジン’null’からの”のスクリプトへのアクセスはCORSポリシーによってブロックされています。クロスオリジンリクエストはプロトコルスキームでのみサポートされていますよ。chrome、chrome-extension、chrome-untrusted、data、http、https、isolated-app
最初意味が分からなかったので、一つ一つ追っていき、個人的には以下のように、ざっくりと解釈しました。
- ブラウザ（Chromeとか）は、安全性のために、「同一オリジンポリシー」という、同じオリジン（ドメインとか、サイトなどをイメージ）以外からのアクセスは拒否するという”ルール”を定めてます。
- しかし、今のネット世界は、複数のオリジンでアクセスし合うことでより便利になっているので、一方的に拒否しているだけでは、色々不便かも。
- そこで、「ここは安全だよ」というお墨付きを得ているところであれば、たとえ異なるオリジンでも、アクセスを許可しよう、それがCORSポリシー。
「これまで安全のために、身内だけでしかやり取りしていなかったけど、それだと社会で通用しないから、他人でも安心できる人とは、やり取りしていこう」
おそらく詳細なところにおける認識は誤っていると思いますが、このような難しい内容は簡単に捉え、ひとまずプログラムが動くようにすることが大切かもしれません。
ただ、いずれにしても、オリジン、つまり、http://example.comのように、URL部分が大切というわけです。
今回のエラー文を見てみると、” from origin ‘null’ となっており、これだと、そもそもCORSポリシーにおいて重要なオリジンの部分が、ブラウザから見て、オリジン無し（=null）扱いになるので、ブロックされたのでしょう。
このエラーは、ローカル環境で開発をしているときに、よくあるエラーだそうで、「http、https」とあるように、サーバー経由でのアクセスであれば、問題なさそうです。
関連記事
