fetchapiでのクロスオリジンエラー

Question

javascriptにてfetchでヤフーのwebapiを使用する際に、corsエラーが発生します。
ヤフー側でCORSの制御をしていると思うのですが、それならwebapiを開放していないと思いますし、
jsonpなどで対応しなければならないのでしょうか？

自分でwebpiを開発していれば、レスポンスヘッダーにcorsの許可をしてあげればできるのですが。。

ブラウザや、カールコマンドなどでは取得出来、デベロッパーツール（クローム）の際にエラーが出ます

詳しい方教えていただけると助かります。

    <script>
      const result = fetch(
        "https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=キー&query=ほうとう"
      )
        .then((response) => {
          if (!response.ok) {
            console.error("エラーレスポンス", response);
          } else {
            return response.json().then((userInfo) => {
              // HTMLの組み立て
              const view = createView(userInfo);
              // HTMLの挿入
              displayView(view);
            });
          }
        })
        .catch((error) => {
          console.error(error);
        });

      //console.log(result);
    </script>

Answer 1

APIの仕様が分かりませんし、こちらで再現できないため推測になりますが、

const result = fetch(
  "https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch?appid=キー&query=ほうとう",
    {
      mode: "cors",
    }
)

のように、Request.modeを設定することで対処できないでしょうか？？

Answer 2

ご返信ありがとうございます、Herokuで独自のCORS AnywhereサーバーをプロキシURLを設定したら出来ました。