JavaScriptでAPIを叩いたらCORSエラーになった話

JSでCORSエラー発生...

以下のコード(fetch()を使って)で外部APIを叩いてデータを取得しようとした。

    const url = 'https://api.bitflyer.com/v1?product_code=BTC_JPY';

    fetch(url)
      .then(reseponse => {
        reseponse.json();
      })
      .then(data =>{
        console.log(data);
      });

しかし、以下のようなエラーが発生した。

Access to fetch at 'https://api.bitflyer.com/v1?product_code=BTC_JPY' from origin 'null'
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.

これらの文言を解釈すると、要するに....

• api.bitflyer.comとは異なるホストからアクセスしようとしていますよ。
• CORSのポリシーにより、ブロックされましたよ。
• サーバーからのレスポンスにAccess-Control-Allow-Originのヘッダーがありませんよ。
• no-corsのmodeを付けてリクエスト送ればCORSがdisableになるよ。

CORSとはこちらでも書いた通り、異なるホストからでもアクセスを許可する仕組みである。

つまり上記の場合
bitflyer側がAccess-Control-Allow-Originを設定していないため、
ブラウザによってブロックされてしまった
ということである。

新しいヘッダーを追加して再度トライ

modeのno-corでやればいいじゃん？、的なことがエラーメッセージに書いてあったので、以下の通りソースコードを修正して再度トライしてみた。

    const url = 'https://api.bitflyer.com/v1?product_code=BTC_JPY';

    fetch(url, {
      mode: 'no-cors'
    }).then(reseponse => {
      reseponse.json();
    }).then(data =>{
      console.log(data);
    });

しかし、上手く行かず、、、、、
以下のエラーが発生した。

Uncaught (in promise) SyntaxError: Unexpected end of input

最初のエラーメッセージに書いてあるopaque responseが問題なのでは？？
と思い。これを調べてみることにした。

opaue responseとは？？？

opaque response 直訳すると不透明なレスポンスという意味である。
デバッグしてレスポンスの中身を見てみると以下の通りである。

//Response(一部省略)
{
    body: null,
    bodyUsed: false,
    ok: false,
    redirected: false,
    status: 0,
    statusText: "",
    type: "opaque"
}

bodyがnullである！！！
言葉通り不透明なレスポンスである。。。。

結論

色々ネットでも調べましたが、
JavascriptでCORSエラーを回避してレスポンスを得るのは不可能
という結論になりました。

素直にバックエンドと連携せよということでしょうか....

参考

What is an opaque response, and what purpose does it serve?