xserver javascriptのfetchメソッドでhtmlファイルのurlを読み込む方法

Question

実現したいこと

xserverを用いてホームページの運用を行っています。
保守性の向上のため、ヘッダー等の共通化を行っています。

前提

ローカルのファイル階層は下記の通りです。

jsについては初学のため、必要に応じて学んでいるレベルです。
ヘッダーのアクションをjsで書きました。

window.addEventListener('DOMContentLoaded', async()=>{
    const header=document.querySelector('header');
    const html=await fetch('header.html').then(res=>res.text());
    header.insertAdjacentHTML('afterbegin',html);

    $(".openbtn").click(function () {//ボタンがクリックされたら
        $(this).toggleClass('active');//ボタン自身に activeクラスを付与し
        $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
    });

    $("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
        $(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
        $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
    });

});

fetch('header.html')という箇所を修正し、下位上位の階層問わずにheader.jsを実行したいです。（説明が下手で申し訳ございません。）index.htmlでheader.jsを呼び出すと正常に処理されますが( fetch('../header.html'') のような気がしますが、上記でも大丈夫でした。)、diary.htmlでheader.jsファイルを呼び出すと、header.htmlとdiary.htmlは階層が異なるため、正常に呼び出すことができません。

試したこと

xserverのpublic_htmlフォルダ内に上記のファイルをupしているので、

fetch('https://example.com/header.html')

として、header.htmlファイルのurlから読み込もうとしましたが、読み込めませんでした。画像は

src='https://example.com/image/sample.png'

で呼び出すことができました。

補足情報（FW/ツールのバージョンなど）

xserverにファイルをアップロードしてホームページを運営しています。

Comments

[otn]

> として、header.htmlファイルのurlから読み込もうとしましたが、読み込めませんでした。
開発者ツールのコンソールに何かメッセージが出てませんか？

[kgnmakl]

コメントありがとうございます。
解決しました。下に載せています。

live serverのコンソールに下記の通り書かれており、それをもとに解決できました。

Access to fetch at 'https://example.com/header.html' from origin 'http://127.0.0.1:5501' has been blocked by CORS policy

Answer 1

'header.html'を'/header.html'にしてみてください

Answer 2

vscodeの拡張機能である、live serverを使って開発を行っていました。
live server内ではheader.htmlのurlを呼び出すことはできませんでしたが(画像URLは呼び出せるのになぜ？)、xserverで確認すると正常に呼び出せていました。コメントしてくださった方々、ありがとうございました。

Comments

[otn]

使用環境は正しく書きましょう。xserver上で実行した結果としか読み取れない。
live serverが認識しているホスト名が example.com でなかったと言うことでしょう。

何故 fetch('header.html') から fetch('https://example.com/header.html') に行っちゃったのか？？？
普通に考えるとfetch('/header.html') ですね。
fetch('https://example.com/header.html') と書いちゃったと言うことは基本的なところでの理解不足があると思います。

[kgnmakl]

ご指摘ありがとうございます

Live server内で、
fetch(https://example.com~)は読み込めないが、
src(‘https://example.com~)が読み込める点についてご教授願います。

[otn]

> Live server内で、
> fetch(https://example.com~)は読み込めないが、
> src(‘https://example.com~)が読み込める点についてご教授願います。

1．「ホスト名が違うとfetchで読めない」の理由は理解できていますか？

2．fetch()というのはJavaScript標準の機能だと思いますが、src() というのは何のことでしょうか？

[kgnmakl]

fetchメソッドはJavaScriptからサーバーへのHTTPリクエストを行い、レスポンスを取得するためのAPI。一方、src属性はHTML要素が参照する外部ファイルのURLを指定し、そのファイルをダウンロードして要素のコンテンツとして表示するからなんですね。

Answer 3

この回答はGPT-4による自動生成回答です

以下の方法で、異なる階層のページでもheader.htmlを読み込むことができます。

1. 現在のページのURLを取得します。
2. URLから、header.htmlが配置されているディレクトリまでの相対パスを計算します。
3. 計算した相対パスをfetch関数に渡して、header.htmlを読み込みます。

以下のコードをheader.jsに追加してみてください。

function getRelativePath() {
  const currentPath = window.location.pathname.split('/');
  const depth = currentPath.length - 2; // ディレクトリの深さを計算
  let relativePath = '';

  for (let i = 0; i < depth; i++) {
    relativePath += '../';
  }

  return relativePath;
}

window.addEventListener('DOMContentLoaded', async () => {
  const header = document.querySelector('header');
  const relativePath = getRelativePath();
  const html = await fetch(relativePath + 'header.html').then((res) => res.text());
  header.insertAdjacentHTML('afterbegin', html);

  // 以下のコードは変更なし
  $(".openbtn").click(function () {
    $(this).toggleClass('active');
    $("#g-nav").toggleClass('panelactive');
  });

  $("#g-nav a").click(function () {
    $(".openbtn").removeClass('active');
    $("#g-nav").removeClass('panelactive');
  });
});

このコードは、現在のページのURLからheader.htmlまでの相対パスを計算し、そのパスをfetch関数に渡しています。これにより、異なる階層のページでもheader.htmlを正しく読み込むことができます。