CORBが発生してjsonが読み込めない。

Question

問題

cloud function for firebase に保存してあるHTTPリクエストトリガーにGETリクエストを送るとCORBが発生します。

経緯と試してみたこと

今までサーバー周りのことは殆ど勉強したことがなく、非同期通信を行いたい場合cloud firestoreのonSnapshot() メソッドを使っていました。

掲示板的なウェブサービスしか作ったことがなく、リアルタイムでの値の取得はonSnapshot()メソッドを使えば事足りていたので。

なのでAjaxなどの非同期通信周りの技術については先日まであまり知らない状態でした。

しかし、サードパーティAPIを使おうと思った時、Ajaxは覚えなければいけない技術ですし、JSONPに対応していないAPIはクライアント側ではなく、サーバ側で処理を行わなくてはいけません。そんな訳で2日前からcloud function とAjaxについて勉強をしています。

※勉強を始めたばかりで用語の使い方が間違っていると思うので、文脈から大体の意図を汲み取っていただけると助かります。

まず今実現したいことは、cloud function にリクエストを送り、そのレスポンスとして返ってきた値をconsoleに表示するということです。

下記のコードはcloud function にデプロイした関数です。

const functions = require('firebase-functions');

const admin = require('firebase-admin');
admin.initializeApp();

  exports.test = functions.https.onRequest((request, response) => {
    response.json({"test":"testdayo"});
  });
 

デプロイした後にプロンプトに表示される、ファクションURL(エンドポイント)にブラウザから直接アクセスすると下記の画像のような結果が表示されます。

これは上手くいきます。次にAjaxでリクエストを送り、返ってきた値をconsoleに表示する処理を行おうとしました。
下記はAjaxの記述と、エラー文の内容です。

        function jsonCallback(json) {
            console.log(json);
        }

        $.ajax({
            url: 'https://略',
            type:'GET',
            dataType: "jsonp"
        });

jquery.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://略?callback=jQuery34106754768778417868_1579419939152&_=1579419939153 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

CORSではなくCORBというエラーが発生します。エラー文に読めと記載されているURLを参照したり、CORBという単語を検索すると、クロスオリジンから受け取った値を読み込まないというブロックが働いてるみたいでした。

しかし、解決方法を調べてもそれらしい記事はあまり見つからず。記事が見つかっても英語で書かれており、内容も私には難しく、google翻訳で大体のニュアンスを掴んで解決みたいなことも出来ませんでした。

またcloud functionもAjaxも勉強を始めたばかりで、CORBが発生する理由がどちらにあるのかもよく分からない状態です。

勉強を進めていけば自己解決するかもしれませんが、ここで躓いていると前に進んでいる感覚がなく、モチベーションが湧きそうになかったので、質問することにしました。

(受け取った値を読み込まないということは、リクエストを送りレスポンスが返ってくるという処理自体は成功してるということなんですかね。。。？)

質問

問題の解決方を全て教えてもらうとなると、回答者の方の負担になりますし、私自信の勉強にもなりません。

なので端的なアドバイス、例えば、cloud functionにデプロイした関数に問題はなく、原因はAjaxの記述にある、詳しくはこのQiitaの記事を見ると良い、というような回答をいただけたら幸いです。

宜しくお願い致します。

※もしかしたらアドバイスだけでは解決に至らなかった場合、返信機能を用いて質問をするかもしれません；；

追記

  exports.test = functions.https.onRequest((request, response) => {
    response.jsonp({ message: 'changed' })
  });

responseオブジェクトのjsonpメソッドを使うことで、解決することが出来ました。
関数にjsonpメソッドがないのに、datatypeにjsonpを指定してリクエストを送ると、CORBが発生するみたいです。

Answer 1

esponseオブジェクトのjsonpメソッドを使うことで、解決することが出来ました。
関数にjsonpメソッドがないのに、datatypeにjsonpを指定してリクエストを送ると、CORBが発生するみたいです。