javascript ajaxを使用したサイト内検索を実装したい。

Question

表題の件で手詰まりとなりご相談したいです。
どうぞよろしくお願いします。

#W#検索窓設置側　index.htmlをはじめとした全ページのヘッダー

<li id="wrap_search">
  <form action="search-result/result.html" autocomplete="on" method="get">
 <input id="search-input" placeholder="サイト内検索" type="text" name="search-key" >
<input id="search-buttom" class="" type="submit" value="">
  </form>
			</li>

##検索結果吐き出し側 /search-result/result.html

<section class="result_contents">
  <h2>検索結果</h2>
  <ul id="result_wrapper">
	  <li></li>
  </ul>
	</section>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script>	
  let v = new URLSearchParams(window.location.search);
  v = v.get('search-key');
	
  const urlLists = [
    "/fujisawa_international_university/",  
    "/about/select/",
    "/about/access/",
    "/contact/"
  ];
  $.each(urlLists, function(i){
    $.ajax({
      url　: urlLists[i],
      dataType : 'html',
      success　: function(data){
        if( $(data).find(".article").text().indexOf(v) !== -1){
          $('<li><a href="' + urlLists[i] + '">' +$(data).find("h2").text() + '</a></li>').appendTo('ul');
          }
        },
        error: function(data){
          console.log("error")
        }
      });
    });
 </script>

検索させたい語句を持つ
"/fujisawa_international_university/",
"/about/select/",
"/about/access/",
"/contact/"
内のsectionやdivなどにclass="article"をつけています。

##現在の現象
result.html側の開発者ツール「コンソールログ」にて

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

という記載が
"/fujisawa_international_university/",
"/about/select/",
"/about/access/",
"/contact/"
上記検索先フォルダー4つ全てに対してエラーとして現れます。
なお、上記フォルダー設置先urlはhttpsではありません。

上記解決策として

---

この場合は、サーバーサイドから返却されるHTTPレスポンスヘッダーにAccess-Control-Allow-Originを設定してあげましょう。

---

という記事を見つけたので、試してみたいのですが、この場合どこに記述するべきなんでしょうか？
また、他にスマートな解決策はありますでしょうか？

現在テストしている環境はXAMPPです。

どうぞよろしくお願いします。

Answer 1

現在テストしている環境はXAMPPです。

でしたらfile:/ではなく全てhttp://でアクセスしましょう。
正しくアクセスできればそれで解消できるはず。

Comments

[m.ts10806]

でも作り次第では/が一個不要かもしれない

[ema-material]

早速の回答ありがとうございます。
御指南いただいた絶対パスの記述、http://ですが、
質問する前にも念のためと思ってやってみましたがダメでした。

今も念のためにやってみたのですが、
コンソールログで
---------------------------------------
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost/fujisawa_international_university/index.html にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。
------------------------------------

となります。

[ema-material]

相対パスの考え方でしたら
/search-result/は
/fujisawa_international_university/
の下でして、他のフォルダー
/about/
/contact/と同列になります。

[m.ts10806]

サーバーサイドのプログラムがあればそこでheader送信。
なければ.htaccessで行います。

[m.ts10806]

>相対パスの考え方でしたら

/ で始まってるとルートからの絶対パスになりますし、fileのときのように///と本来２つのところが３つになります。

[ema-material]

ありがとうございます。
先ほど絶対パスにした時にはエラーが出ていたのですが、その後エラーが消えました。
そして検索結果がresult.htmlに吐き出されるようになりました！

デザインが盛大に崩れ始めたので、クラス名をつけてjavascriptを打ち直しています。
クラス名をつけてjsに指示をすると検索結果が吐き出されなくなったりしますが、
現在そのバグを潰すべく頑張っています。ありがとうございました！

[m.ts10806]

ちょこちょこ直すより部品にわけて個別に作った方が問題切り分けができると思います。がんばってください。

[ema-material]

はい。あのあとおかけ様で無事実装できました。ありがとうございました。

[m.ts10806]

解決されたようで何よりです

[ema-material]

先ほど、エラー状態を書き込んだのですが、解決しましたので、編集にて削除しました。ありがとうございました。