質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

2回答

1142閲覧

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

heysaku

総合スコア1

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2021/05/03 15:11

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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
itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

response.status はどうなっているでしょうか。
あと、 fetchのmode に no-cors を指定されていますが cors でいいような気がします。

投稿2021/05/03 15:25

hide5stm

総合スコア426

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問