CROSエラー JavascriptからGASへのPOST送信


 

以前に、以下の記事で書いたが少し訂正があります。
https://i-say.net/note/1058/

json形式でヘッダーを指定すると、CROSエラーになるという件ですが、
以下のようにヘッダーを指定しなければ、問題が解決します。
json形式で送れます。

dataがオブジェクトとしています。

 fetch(endPoint, {
                method: 'POST',
                body: JSON.stringify({ data: data }),
            })
                // HTTPリクエストが完了した場合
                .then(response => response.text())  // レスポンスはテキスト形式であると仮定
                .then(data => {
                    console.log('Success:', data);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });

GASは、application/json形式のContent-Typeを持つプリフライトリクエストを処理できないため、この形式でリクエストを送るとCROSエラーが発生することがあります。

この件をContent-Typeを変更することで解決していたのですが、そうではなく
たんにContent-Typeを含むheadersを送らないという方法で解決できるということです。

ちなみにGAS内部でエラーを起こすと、CROSエラーなります。
これは、CROSに関係しているというよりは、GASでのエラーが原因です。

【エラーの確認方法】
doPost(e)関数内でエラーを起こすとそうなってしまうので、
try,catch構文でエラーを補足して、Javascriptに戻そうとしても無駄です。

doPost(e)関数内でdoPost2(e)関数を呼び出して、そちらでtry,catch構文を作り
処理を書きます。doPost2(e)関数内でcatchでエラーを返したものを
doPost(e)で、Javascriptに送信すると、エラーがわかります。
もしくは、doPost関数にもcatchを入れることで、そちらのエラー文がJavascriptに渡ります。

あとは、スプレッドシートに「LOG」などのシートを追加して、そこにエラーや確認したいデータを書き込むのもよいです。

ちなみにですが、GASをwebアプリ化した後で、GASを変更した場合は、たんに保存では
アプリが更新されません。
必ず、「デプロイの管理」からペン(編集ボタン)から、新バージョンを作成して、更新しましょう。

これを忘れると、直しても変化がないことになります。手間ですが、するしかありません。

今回は、いろいろテストを行い、かなりすっきりしました。

GASへは、JSON形式でデータを送りますが、返答はプレーンテキスト形式がおすすめです。

(JSON形式でも返答はできるはずですが、それにする程の目的がないので、テキストで受け取っています)

WEBプログム、WEBデザインなどの制作については、以下を御覧ください。

WEBプログム、WEBデザインなどの制作