HTMLファイルをChromeで開く方法

Question

あるHTML/Javascriptファイルを作りましたが、HTML/JavascriptファイルをC/:下においてダブルクリックで開きたいですが、開けないですね。
VSCodeのOpen with Live Serverで開くと開けます。解決策を教えていただきたいと思います。
ちなみに、Open with Live Serverで開くとURLの所に 127.0.0.1:5500 が表示されます。
ダブルクリックで開くと C:/ が表示されます。
追加補足：コンソールログでは以下のメッセージが表示されます。
Access to script at 'file:///C:/**/*/js/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

まだ解決されてないですが、一応自分が調べた内容をいかに補足します。
もし、簡単に解決できる方法をご存じの方はぜひ教えてください。
自己調査：原因はchromeでローカルのHTMLが外部ファイル(JS)の再読み込みできない問題みたいですね。
JSでimport/export機能が使われているのが問題だと思います。

Comments

[miyabi_pudding]

127.0.0.1:5500で開かさるということは、
Apatcheなどを通してでないと実行できない、のだと思います。
何かフレームワークなどを使っていませんか？
それだと、おそらくですが、HTMLファイルをダブルクリックでブラウザでまんま開くと、
正常に動作はしません。
（よって、エラー文のように実行されない）

フレームワークなどお使いなら、（React、Vueなど）その質問タグと、その旨を質問文に記載してください。

[kinsncn]

ありがとうございました。いろいろ調べて原因はわかりましたが、解決策がなく困っています。
原因はchromeでローカルのHTMLが外部ファイル(JS)の再読み込みできない問題みたいですね。
JSでimport/export機能が使われているのが問題だと思いますが、import/export機能が使われているJSファイルを一つに統合することは可能でしょうか？

[miyabi_pudding]

> JSでimport/export機能が使われているのが問題だと思いますが

なるほど。
そうですね、それだと、
クロスドメインでは基本はできません。
（つまり、Apacheなど、httpアクセス上で開く必要がある）

その旨も質問本文に記載して下さい。
その事実をもって回答に移らせていただきます。

[kinsncn]

ありがとうございました。

[miyabi_pudding]

私の回答は参照されましたか？
import機能を使わないように改変するのはかなり大変で得策には決してなりません。
よって、ローカルサーバーなどで、
httpアクセスとするのが一番早道です。

Answer 1

JSでimport/export機能が使われているのが問題だと思いますが、

この機能は、基本的にクロスドメインでは実行できないため（セキュリティ措置のため）ローカルにせよなんにせよ、
httpアクセスから起動する必要があるため、
HTMLファイルをダブルクリックでブラウザを起動した場合は正しく動作しません。

import/export機能が使われているJSファイルを一つに統合することは可能でしょうか？

できなくはないですが、自身で組み直しを強いられるため、やるのは得策ではありません。
（結果、機能しなくなる恐れが大）

下記で、解決策を記載します。

• XAMPPなどの、ローカルサーバー起動により、httpアクセスによる、Webページとして起動する
• ブラウザをオプション起動し、CORSを回避し、HTMLファイルをドラッグ&ドロップして、開く。

二つ目は、あまり上手く行った試しがないため、
多くの場合は、一つ目で解決するでしょう。
とかく、CORSに引っかかる機能を使うならば、あきらめて、なんらかの形でhttpアクセスとして、HTMLを実行した方が幾分も早いです。

Answer 2

エラーメッセージ自体は、main.jsが原因でエラーが発生していると書いてありますね。
main.jsの中で、どこかのサーバーにアクセスしようとしている記述はないでしょうか？
それを消すと、このエラーが消える可能性があると思います。

ちなみに、エラーメッセージをグーグル翻訳にかけると、

from origin'null 'はCORSポリシーによってブロックされています：クロスオリジンリクエストはプロトコルスキームでのみサポートされています：http、data、chrome、chrome-extension、chrome-untrusted、https。

この意味合いは、
【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した - Qiita

を参照するとわかりやすいかもしれません。

VSCodeのプラグインを使うと、そのHTMLファイルは、簡易的なウェブサーバーで配信されているような状態です。そのとき、HTTPという通信方式が使われています。

ウィンドウズでHTMLファイルをダブルクリックするのは、HTTPという通信を利用せずに、シンプルにHTMLファイルを閲覧しようとしている状態になるかと思います。
ワードのファイルやエクセルのファイルを、ダブルクリックで開くのと同じような状態、といえばいいでしょうか。

おそらく、main.jsが通信している先で、アクセス（リクエスト）を受け取ったサーバーが
「あれ？HTTPをつかった通信方式ではないなぁ」ということで、エラーを返しており、それをChromeが受け取って、エラーメッセージを表示している状況ではないかと推察しました。

Answer 3

HTMLファイルをマウス右クリックで、「プログラムから開く」で「別のプログラムを選択」→「常にこのアプリを使って.htmlファイル開く」にチェックを入れてChromeを選択で、どうでしょう。

Comments

[kinsncn]

ありがとうございました。　ただ、解決できないですね、説明不足だと思いますので、情報を追加しました。再確認していただけますか？