htmlの共通部をjQueryで読み込ませたい

問題点

表示されない。

エラー文

【Chrome】
GET file:///省略/public/header.html net::ERR_FAILED

【Firefox】
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、
file:///省略/public/header.html にあるリモートリソースの読み込みは拒否されます (理由: CORS 要求が http でない)。

試したこと

１. mozillaで検索すると下記のように書いてあったのですが、https形式にする方法がわかりませんでした。

何が悪いのか

CORS リクエストは URL スキームが HTTPS の場合のみ利用できますが、リクエストで指定された URL が異なる種類のものです。これは、ローカルファイルを指定する URL が、 file:/// の URL を使用している場合によく起こります。
この問題を修正するには、単純に CORS に関するリクエストを発行する際に HTTPS の URL を使用するようにしてください。

2. jQueryの公式レファレンスの説明をみてもうまくいきませんでした。試しに下記のように記述してみましたが、これもできませんでした。
jQueryレファレンス/load()

html
1	
2$( "#header" ).load( "ajax/header.html" );

3. 他、いくつかの記事を参照しましたが、一般的な操作では何故か動作できませんでした。

読み込まれる側のhtmlには余計なタブは記述していません。読み込みたいタブのみ記述しました。

解決方法のわかる方いらっしゃいましたら教えていただけると幸いです。よろしくお願いします。

以下コード

※省略済み

indexhtml
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>Document</title>
5    <script
6      src="https://code.jquery.com/jquery-3.5.1.min.js"
7      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
8      crossorigin="anonymous"
9    ></script>
10  </head>
11  <body>
12    <div id="header"></div>
13    <div id="nav"></div>
14    <main>
15      <section></section>
16      <section></section>
17    </main>
18    <div id="footer"></div>
19    <script>
20      $(document).ready(function () {
21        $("#header").load("header.html");
22        $("#nav").load("nav.html");
23        $("#footer").load("footer.html");
24      });
25    </script>
26  </body>
27</html>
28

headerhtml
1<section>
2  省略(nav.html, footer.htmlも同様)
3</section>

行動規範の内容に同意します

回答2件

loadを使うならhttpから始まるURLで無いと難しいので、ローカルサーバ（例えばWindowsならXAMPP、MacならMAMP）を組み立てるなどしてみてください。

投稿2020/07/27 15:07

kei344

総合スコア69606

ベストアンサー

やろうとしていることは、セキュリテイ上の理由で明示的に禁止されています。
なぜなら、利用者が悪意のあるサイトを閲覧した場合に、そのサイトのページからパソコンのローカルファイル（file:///...）にアクセスできてしまうと、ローカルに保存された秘密情報を簡単に盗めてしまうからです。この制限は同一オリジンポリシー(Same Origin Policy)と呼ばれます。
解決策の一つとしては、kei344さんが提案されているようにローカルサーバーを設置した上で、ローカルサーバー上でCORS設定を導入することです。CORSは同一オリジンポリシーの制限を緩める拡張で、相手側の虚化がれば同一オリジンを超えてアクセスできる仕様です。

投稿2020/07/28 00:03