Reactのfetch-jsonpでyahoo apiをたたくとcross-originエラーが発生する

前提・実現したいこと

Reactの勉強中です。
yahoo apiをたたいて商品カテゴリーランキングを取得するWebアプリを作成しております。

fetch-jsonpでapiをたたいたところ下記のクロスオリジンエラーが発生しました

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

**Cross-Origin Read Blocking (CORB) blocked cross-origin　response　**https://shopping.yahooapis.jp/ShoppingWebService/V2/categoryRanking?appid=XXXXXXXXXX&category_id=10002&callback=jsonp_1634193643100_26941 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Error: JSONP request to https://shopping.yahooapis.jp/ShoppingWebService/V2/categoryRanking?appid=XXXXXXXXXX&category_id=10002 timed out

※上記APIをクロームブラウザで表示するとカテゴリーランキングのjsonデータが返ってきます。

該当のソースコード

import fetchJsonp from 'fetch-jsonp';
import qs from 'qs';
import { replace } from 'react-router-redux';

const API_URL = 'https://shopping.yahooapis.jp/ShoppingWebService/V2/categoryRanking';
// const API_URL = 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking';
const APP_ID = 'XXXXXXXXX';

//リクエスト開始
const startRequest = category => ({
type: 'START_REQUEST',
payload: { category },
});

//レスポンス受信
const receiveData = (category, error, response) => ({
type: 'RECEIVE_DATA',
payload: { category, error, response },
});

//リクエスト完了
const finishRequest = category => ({
type: 'FINISH_REQUEST',
payload: { category },
});

//ランキングを取得する
export const fetchRanking = categoryId => {
//redux-thunkを使った非同期処理
return async (dispatch, getState) => {
//カテゴリIDに対応するstate.shopping.categoriesの要素を取得
const categories = getState().shopping.categories;
const category = categories.find(category => (category.id === categoryId));
//対応するデータがない場合はトップページへリダイレクト
if (typeof category === 'undefined') {
dispatch(replace('/'));
return;
}

dispatch(startRequest(category));

const queryString = qs.stringify({
  appid: APP_ID,
  category_id: categoryId,
});

try {
  // const responce = await fetchJsonp(`${API_URL}?${queryString}`);

** const responce = await fetchJsonp(${API_URL}?${queryString});**
const data = await responce.json();
dispatch(receiveData(category, null, data));
} catch (err) {
dispatch(receiveData(category, err));
}
dispatch(finishRequest(category));

};
};

試したこと

chromeブラウザの拡張機能で「Access Control Allow Origin」をインストールして
クロスオリジンでもアクセスできるようにしましたが問題は解決しませんでした。

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

テスト環境URL
http://localhost:3000/

以上、ご査収の程よろしくお願い申し上げます。

追記 fetch-jsonpをfetchに変更
// const responce = await fetchJsonp(${API_URL}?${queryString});
const responce = await fetch(${API_URL}?${queryString});

fetchに変えてみたところ、下記エラーが表示されました。
「Failed to load resource: net::ERR_FAILED」
API自体をたたけていないようです。

どうしたらAPIのデータを取得できるのかご教示いただけたら幸いです。

10/18　追記
fetchのmodeをcors指定にして、クロームブラウザの拡張ライブラリ「Access-Control-Allow-Origin」をONして
yahoo APIにアクセスしたところ、responseでデータの取得はできました
ただし、strictモードでのエラーが発生しており画面にデータを表示できていない状態です。

yahoo api(V2)はjsonpには対応していないようですがcorsには対応していると思われます。
クロスサイトオリジンの制限はブラウザでの制限なのでjsonpが使えないため
chromeの拡張ライブラリで乗り越えました。

問題がcorsからstrictモードになったので別に質問させていただきます。
ご回答者様ありがとうございました。

コードの編集
// const responce = await fetchJsonp(${API_URL}?${queryString});
const responce = await fetch(${API_URL}?${queryString} ,{mode:'cors'});

responseデータ

Lhankor_Mhy

2021/10/15 02:29

V2ではJSONPが提供されているような記述がないのですが、なにを参考にしたのか教えていただけますか？ https://developer.yahoo.co.jp/webapi/shopping/shopping/v1/categoryranking.html https://developer.yahoo.co.jp/webapi/shopping/v2/categoryRanking.html

kazu2021

2021/10/15 02:46

すみません。勉強不足です。 V1でjsonpが提供されていたのでV2でも新しい機能であるJSONPが使えると思いました。参考にしたのは翔泳社のReact入門でサンプルコードでAPI V1のURLをV2のＵＲＬに書き換えました。 https://www.shoeisha.co.jp/book/detail/9784798153353 Fetch APIで試してみます。 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

Lhankor_Mhy

2021/10/15 03:12

fetch で叩いてもCORSでブロックされるのは変わらなさそうな気がしますが……

kazu2021

2021/10/15 03:18

この方がPHPですがcorsエラーでずにV2でAPIの取得に成功してまして https://bubudoufu.com/query-ranking/#toc3 ＞ $response = file_get_contents($url); なんて私の環境だけCORSでブロックされてしまうのかなと・・

Lhankor_Mhy

2021/10/15 03:20

PHPだからでは。 CORSブロックするのはサーバではなくてクライアントなので、サーバ間のアクセスではブロックされないです。

kazu2021

2021/10/15 03:29

クライアントで実行されれるjavascripでは jsonpに対応していないyahoo API(V2)からデータを取得することはできないということでしょうか？

Lhankor_Mhy

2021/10/15 03:44

そうなのではないかと思います。

kazu2021

2021/10/15 07:46

fetch apiでmode:corsを指定すると異なるオリジンの問題を乗り越えられるようなので指定したところ「Failed to load resource: net::ERR_FAILED」のエラーは出なくなりましたが modoを指定しない場合と同じapiのところでpauseします。（質問最後尾画像） // const responce = await fetchJsonp(`${API_URL}?${queryString}`); const responce = await fetch(`${API_URL}?${queryString}` ,{mode:'cors'}); もう少し調べてみますありがとうございました。

Lhankor_Mhy

2021/10/15 07:52 編集

いいえ、そうではないです。 mode:cors としても、サーバ側で設定がされていない限り、クロスオリジンのリクエストはブロックされます。 https://developer.mozilla.org/ja/docs/Web/API/Request/mode

kazu2021

2021/10/18 06:27

質問文に追記させて頂きました。 mode:corsでサーバ側からカテゴリーランキングのresponseのデータを取得できました。 strictモードでのエラーが発生しているため別スレッドで質問させていただきます。たいへん助かりました。ありがとうございました。

Lhankor_Mhy

2021/10/18 06:56 編集

なるほど、ご自身のみで利用するアプリを作っていて、第三者に公開する予定ではなかったのですね。ご解決されて何よりです。お手数ですが、自己解決の処理をお願いします。

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

回答2件

自己解決

fetchのmodeをcors指定
クロームブラウザの拡張ライブラリ「Access-Control-Allow-Origin」をON
yahoo APIでresponseでデータの取得
responseデータをYahoo API(V2)用のオブジェクトツリーに合わせるようにコードを変更し
ランキングデータを画面表示できました

クロームブラウザの拡張ライブラリでCORSのブロックを強制的に解除してるため
テスト環境のみでの動作になります。

Lhankor_Mhy様
いろいろとご指摘いただき誠にありがとうございました。