HTMLからスプレッドシートの値を読み込む

前提・実現したいこと

https://masa-enjoy.com/gas-api-spreadsheet
このサイトを参考に、HTMLにスプレッドシートから読み込んだ値を表示したい。

発生している問題・エラーメッセージ

Access to fetch at 'WebAPIのURL(ここは書き換えてます)' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8    <!--Bootstrap-->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
12        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
13    </script>
14    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
15        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
16    </script>
17    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
18        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
19    </script>
20
21    <title>GAS API</title>
22</head>
23
24<body>
25    <div class="container">
26    <form action="#" method="POST">
27        <div class="form-group ">
28            <label for="name">名前</label>
29            <input type="text" id="name" name="name" class="form-control">
30        </div>
31        <div class="form-group">
32            <label for="email">メールアドレス</label>
33            <input type="text" id="email" name="email" class="form-control">
34        </div>
35        <div class="form-group">
36            <input type="radio" id="sex0" name="sex" value="0" checked><label for="sex0">選択しない</label>
37            <input type="radio" id="sex1" name="sex" value="1"><label for="sex1">男</label>
38            <input type="radio" id="sex2" name="sex" value="2"><label for="sex2">女</label>
39        </div>
40        <div class="form-group">
41            <label for="age">年齢</label>
42            <input type="text" id="age" name="age" class="form-control">
43        </div>
44        <div class="form-group">
45            <input type="submit" value="送信する" class="btn btn-primary">
46        </div>
47    </form>
48</div>
49</body>
50<script>
51    //GASのAPIのURL（各自変更してください。）
52    const endpoint = "★WebAPIのURL★";
53        
54        //APIを使って非同期データを取得する
55        fetch(endpoint)
56        .then(response => response.json())
57        /*成功した処理*/
58        .then(data => {
59            //JSONから配列に変換
60            const object = data;
61            //inputタグそれぞれに取得したデータを設定
62            $('input').each(function (index, element) {
63                if (object[0][$(element).attr('name')]) {
64                    $(element).val([object[0][$(element).attr('name')]]);
65                }
66            });
67        });
68</script>
69
70</html>

該当のソースコード

JavaScript
1//ここは各自変更してください。
2const SPREAD_SHEET_ID = 'スプレッドシートのID';
3const SHEET_NAME = 'シート名';
4
5//GETリクエスト時に呼び出される関数
6function doGet(e) {
7  //スプレッドシートをIDで取得
8  const app = SpreadsheetApp.openById(SPREAD_SHEET_ID);
9  //シートをシート名で取得
10  const sheet = app.getSheetByName(SHEET_NAME);
11  //シートの入力内容を全て配列で取得
12  const values = sheet.getDataRange().getValues();
13  const data = [];
14
15  //シートの入力内容をオブジェクトに詰め替え
16  for(let i=0; i<values.length; i++){
17    //ヘッダー部(1行目)はスキップ
18    if(i === 0)continue;
19    const param = {};
20    for(let j=0; j<values[i].length; j++){
21      param[values[0][j]] = values[i][j];
22    }
23    data.push(param);
24  }
25  //返却情報を生成
26  const result = ContentService.createTextOutput();
27
28    //Mime TypeをJSONに設定
29    result.setMimeType(ContentService.MimeType.JSON);
30
31    //JSONテキストをセットする
32    result.setContent(JSON.stringify(data));
33
34    return result;
35}