ホットペッパーapiをjavascriptでfetchしようとすると、CORSポリシーによってブロックされてしまいます。

前提・実現したいこと

javascriptのfetchを用いてホットペッパーapiを取得しようとしたところ、CORSポリシーによってブロックされてしまいました。

・エディタ：VSCode
・ブラウザ：Chrome

該当のソースコード

javascript
1async function callApi() {
2  const res = await fetch('http://webservice.recruit.co.jp/hotpepper/middle_area/v1/?key=(実際のコードにはAPIキーが入ってます)&middle_area=Y005');
3
4  const shops = await res.json();
5  console.log(shops);
6};
7
8callApi();

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

Access to fetch at 'http://webservice.recruit.co.jp/hotpepper/middle_area/v1/?key=（実際にはapiキーが入力されています）&middle_area=Y005' from origin 'http://127.0.0.1:5500' 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.

試したこと

fetchの内容を変更して再度実行しましたが、エラーの内容に変化はなかったです。

ネットで検索しても解決の手がかりが見つからず困っています、どなたか詳しい方お力を貸してください。

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

回答2件

ベストアンサー

APIのパラメータで format=jsonp を指定して、jSONP形式で呼び出す方法が考えられます。

ホットペッパー | APIリファレンス | リクルートWEBサービス

（追記）

jQueryを使ってサンプルを書いてみました。ご参考までに。

<body>
<script src="jquery-3.5.1.min.js"></script>
<script>
$.ajax({
  url: 'https://webservice.recruit.co.jp/hotpepper/middle_area/v1/?key=【APIキー】&middle_area=Y005&format=jsonp',
  type: 'GET',
  dataType: 'jsonp',
  jsonpCallback: 'callback'
}).done(function(data) {
  var dummy = data; // 成功時 この処理はダミーなので変更してください
}).fail(function(data) {
  var dummy = data; // 失敗時
});
</script>
</body>

投稿2020/06/28 01:50

編集2020/06/30 07:39