JQueryでJSONを読み込むことができない

前提・実現したいこと

JSONファイルからランダムに要素を取得して表示するという機能を実装する際に、外部のJSONファイルを$.ajax()で読み込みたいのですがうまくできません。
Chromeのデベロッパーツールを使って確認したところ以下のエラーが出ました。
1、Access to XMLHttpRequest at'file:///D:/Web_Larning/%E6%AF%8E%E6%97%A5%E9%9B%91%E5%AD%A6/Sample.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

２、Failed to load resource: net::ERR_FAILED　　　　Sample.json

1はクロスドメインが関係してるらしい…？調べてもよく分かりませんでした。
２は純粋にJsonファイルが読み込まれていないと受け取りました。

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

OS:Win10
ブラウザ：GoogleChrome（ 80.0.3987.122（Official Build）（64 ビット））

フォルダ構成
D:/Web_Larning/毎日雑学の下にHTMLのソースとCSSファイル、jsフォルダがあります。jsフォルダの中にSample.json、Javascriptのソースがあります。

ソースコード

Javascript
1$(function () {
2  let $result = $('#result');
3
4  $.ajax({
5    type: 'GET',
6    url: 'Sample.json',　//通信先のurl
7    dataType: 'json'
8  }).then(
9    function (data) {
10      console.log('成功');
11
12      let LIMIT_NUM = 2; //上限
13
14以下略

json
1{
2  "zatugaku": [{
3    "id": "za0",
4    "zatuname": "雷騰雲奔",
5    "imi": "現れたと思う時間すらなく、すぐに去ってしまうこと。"
6  }, {
7    "id": "za1",
8    "zatuname": "トリボルミネッセンス",
9    "imi": "セロハンテープのロールを一定の速さではがすと,Ｘ線を放出する現象（摩擦ルミネセンス）"
10  }, {
11    "id": "za2",
12    "zatuname": "アナジー",
13    "imi": "免疫が働かない事"
14  }, {
15    "id": "za3",
16    "zatuname": "ハイウェイ・ヒプノーシス",
17    "imi": "高速道路催眠現象とも言う。高速道路を走っていると眠くなる現象"
18  }, 
19  }]
20}

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8  <script src="js/zatu.js"></script>
9  <title>Trivia</title>
10
11</head>
12<header>
13  <h1>今日の雑学</h1>
14</header>
15
16
17<body onload="Settoday();">
18  <div class="container">
19    <div id="Sun" style="display:none;">
20      <div id="result"></div>
21
22    </div>
23    <div id="Mon" style="display:none;">
24      <div id="result"></div>
25
26    </div>
27    <div id="Tue" style="display:none;">
28      <div id="result"></div>
29
30    </div>
31    <div id="Wed" style="display:none;">
32      <div id="result"></div>
33
34    </div>
35    <div id="Thu" style="display:none;">
36      <div id="result"></div>
37
38    </div>
39    <div id="Fri" style="display:none;">
40      金曜日に表示する内容
41
42    </div>
43    <div id="Sat" style="display:none;">
44      土曜日に表示する内容
45    </div>
46  </div>
47</body>
48
49</html>

退会済みユーザー

2020/02/25 01:37

環境（OS, ブラウザのバージョンなど）を書きましょう。どういう構成になっているか書きましょう。Web サーバーを立てているわけではなく、質問者さんの PC のフォルダ D:/Web_Larning/毎日雑学に html ソースと json ファイル、その下の js フォルダに .js ファイルがあるということですか？　そのあたりをきちんと書くようにしましょう。以上を質問欄を編集して追記してください。

Tikka123456

2020/02/25 11:25

返信ありがとうございます。補足情報の欄に追記しました。

退会済みユーザー

2020/02/25 13:08

Web サーバーを使うことをお勧めします。

Tikka123456

2020/02/25 23:44

分かりました、サーバーの勉強をします。ありがとうございます。

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

回答1件

Access to XMLHttpRequest at'file:///D:/Web_Larning/%E6%AF%8E%E6%97%A5%E9%9B%91%E5%AD%A6/Sample.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Qiitaで簡単に調べてみると以下の記事が見つかりました。