REST APIでのデータ取得に失敗する

APIでデータを取得しようと、ローカルPC上で以下のようなHTMLを書き、Chromeで実行しましたが"接続失敗"になってしまいます。
ブラウザのアドレスバーにURL(https://api.calil.jp/library?appkey=XXXX&pref=愛知県)を直接入力すると、正常にJSON形式のデータが取得できます。
何が悪いのでしょうか？

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <h1>API TEST</h1>
        <button id="btn">データ取得</button>

        <script type="text/javascript">

            async function getSerchResult(){   

                const response = await fetch('https://api.calil.jp/library?appkey=XXXX&pref=愛知県', {method:'GET',mode:'no-cors'})
                if(response.ok){
                    console.log(response.json());
                }else{
                    console.log("接続失敗");
                }
            }
            document.getElementById("btn").addEventListener("click",getSerchResult);
        </script>


    </body>
</html>

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

回答2件

Chromeのデベロッパーズツールのコンソールで
fetch('https://api.calil.jp/library?appkey=XXXX&pref=愛知県', {method:'GET',mode:'no-cors'})
してみてください。

Refused to connect to 'https://api.calil.jp/library?appkey=XXXX&pref=%E6%84%9B%E7%9F%A5%E7%9C%8C' because it violates the document's Content Security Policy.

と表示されると思います。
コンテンツセキュリティポリシー違反で接続が拒否されたということですね。

XMLHttpRequestも試してみたんですけど、うまくいきませんでした（それは何か自分にミスがあるのかもですが…）

投稿2021/05/03 17:21

編集2021/05/03 17:22