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

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

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

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

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

html
1<section class="result_contents">
2  <h2>検索結果</h2>
3  <ul id="result_wrapper">
4	  <li></li>
5  </ul>
6	</section>

javascript
1<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
2
3<script>	
4  let v = new URLSearchParams(window.location.search);
5  v = v.get('search-key');
6	
7  const urlLists = [
8    "/fujisawa_international_university/",  
9    "/about/select/",
10    "/about/access/",
11    "/contact/"
12  ];
13  $.each(urlLists, function(i){
14    $.ajax({
15      url　: urlLists[i],
16      dataType : 'html',
17      success　: function(data){
18        if( $(data).find(".article").text().indexOf(v) !== -1){
19          $('<li><a href="' + urlLists[i] + '">' +$(data).find("h2").text() + '</a></li>').appendTo('ul');
20          }
21        },
22        error: function(data){
23          console.log("error")
24        }
25      });
26    });
27 </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です。

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

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

回答1件

ベストアンサー

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

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

投稿2020/03/23 06:47

編集2020/03/23 06:48

m.ts10806

総合スコア80850

m.ts10806

2020/03/23 06:56

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

ema-material

2020/03/23 06:58

早速の回答ありがとうございます。御指南いただいた絶対パスの記述、http://ですが、質問する前にも念のためと思ってやってみましたがダメでした。今も念のためにやってみたのですが、コンソールログで --------------------------------------- クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost/fujisawa_international_university/index.html にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。 ------------------------------------ となります。

ema-material

2020/03/23 07:03

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

m.ts10806

2020/03/23 07:04

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

m.ts10806

2020/03/23 07:06

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

ema-material

2020/03/23 07:43

ありがとうございます。先ほど絶対パスにした時にはエラーが出ていたのですが、その後エラーが消えました。そして検索結果がresult.htmlに吐き出されるようになりました！デザインが盛大に崩れ始めたので、クラス名をつけてjavascriptを打ち直しています。クラス名をつけてjsに指示をすると検索結果が吐き出されなくなったりしますが、現在そのバグを潰すべく頑張っています。ありがとうございました！

m.ts10806

2020/03/23 12:48 編集

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

ema-material

2020/03/23 23:42

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

m.ts10806

2020/03/23 23:44

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

ema-material

2020/03/25 00:41 編集

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