【Maps JavaScript APIが表示されない】原因のAccess to script at ‘　file名　’from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.を解決

結論いうと、解決にはVScodeのプラグイン「Live Server」使うのが手っ取り早いです。

1 環境
2 やろううとしていたこと
3 原因
4 解決

環境

Windows10

Maps JavaScript API【Google Maps Platform】

js,html,css

やろううとしていたこと

ローカルでMaps JavaScript APIを用いたマップを出力しようとしたが、表示されない

Chromeの検証ツールで見てみると以下のエラーが発生

Access to script at '　file名　'from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

原因

上記のエラーを直訳すると以下になる。

オリジン「null」からの「file名」のスクリプトへのアクセスは、CORSポリシーによってブロックされました：クロスオリジンリクエストは、プロトコルスキーム：http、data、isolated-app、chrome-extension、chrome、https、chrome-untrustedに対してのみサポートされています。

おおん、CORSとは何ぞやって感じですね。

以下引用ですが、意味合いとしては以下になります。

クロスオリジンリソース共有 (CORS) は、悪意のあるウェブサイトが明示的な権限を持たずに他のサイトのデータ ( APIなど) にアクセスするのを防ぐために、ウェブブラウザで利用されているセキュリティメカニズムです

引用元：　https://ja.developer.box.com/guides/security/cors/#:~:text=%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%AA%E3%83%AA%E3%82%B8%E3%83%B3%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E5%85%B1%E6%9C%89%20(CORS)%20%E3%81%AF%E3%80%81%E6%82%AA%E6%84%8F%E3%81%AE%E3%81%82%E3%82%8B,%E3%81%A6%E3%81%84%E3%82%8B%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%83%A1%E3%82%AB%E3%83%8B%E3%82%BA%E3%83%A0%E3%81%A7%E3%81%99%E3%80%82

つまり、セキュリティ的な問題で他のローカルファイル読み込みができてない、、？という感じみたい。