GASのWebアプリケーションでハマったこと

問題の概要

  1. WebページからXmlHttpRequestでGoogleAppsScriptと通信する
  2. GoogleAppsScript応答を元にWebページで処理をする
    • GoogleAppsScript応答時にCORSエラーでデータを取得できない ← ここが問題

応答

下記のエラーをブラウザの開発者ツールに出力する。(エラーでスクリプトは停止する)

Chrome
Access to XMLHttpRequest at 'https://script.google.com/macros/s/AKfycbw1uH-oQ8FO4RmdXzRdykkFUdcBPMce4EJ1xcRTd1qG8T-S5kE/exec' from origin 'https://www.bugbugnow.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Firefox
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、https://script.google.com/macros/s/AKfycbw1uH-oQ8FO4RmdXzRdykkFUdcBPMce4EJ1xcRTd1qG8T-S5kE/exec にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。

補足(JSONPの場合)

JSONPとしても下記の警告を表示する。

Chrome
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://script.google.com/macros/s/AKfycbw1uH-oQ8FO4RmdXzRdykkFUdcBPMce4EJ1xcRTd1qG8T-S5kE/exec?callback=test&error=err with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Firefox
MIME タイプ (“text/html”) の不一致により “https://script.google.com/macros/s/AKfycbw1uH-oQ8FO4RmdXzRdykkFUdcBPMce4EJ1xcRTd1qG8T-S5kE/exec?callback=test&error=err” からのリソースがブロックされました (X-Content-Type-Options: nosniff)。

調べて特に関係なかったこと

プリフライトリクエスト(OPTIONSメソッド)

ブラウザは、単純なリクエストでない場合、GETなどのメソッドの送信前にOPTIONSメソッドを自動的に送信します。GoogleAppsScriptは、OPTIONSメソッドに対応していない?ため、CORSエラーとなる。

GETやPOSTメソッドでContent-Typeapplication/x-www-form-urlencodedを設定して、他のヘッダーを指定していないような単純なリクエストで通信していたため、本件とは特段関係ありませんでした。

原因

スクリプト内の処理でエラー終了していたのが原因でした。CORSの問題ではありませんでした。CORS関連調べまくって特に何も出てこないで時間を無駄にしたので、この記事を書いています。

なぜCORSエラーが表示されるのか

GoogleAppsScriptは、処理の成功と失敗で以下のような結果の出力をします。

このとき、成功側の応答ヘッダーには、access-control-allow-origin: *が含まれますが、失敗側の応答ヘッダには含まれません。そのため、スクリプト内でエラーした場合、XmlHttpRequestでCORSエラーが発生します。

失敗した場合、結果がそもそも意図したものではありませんが、ステータスコードは200(OK)となるため、問題に気づくのが遅れました。なお、成功した場合、ステータスコードは302(Found)となります。

コメント: 1

成田浩二 さんのコメント...


toshi 様

はじめまして。 株式会社ウイズの成田と申します。
突然のご連絡で失礼します。

弊社は東京で15年間、システム開発を主な事業として
行っている会社となります。

今回、事業拡大を期に地方の方から
お力添えを頂きたいと考えておりご連絡させて頂きました。

地方では携われない開発も東京では見つかりやすいため、
東京で働きたいという声を聞く機会がありましたが、
同時にいきなり東京に出て生活環境を整える手間や、
仕事が無い時のリスクを感じている人もいらっしゃると思います。

今回、弊社ではそのような東京で活躍を目指す技術者様の
サポートとして、東京での生活費を全面お支払いすることで、
技術者様の東京進出のリスクを無くすことを検討しています。

サポート内容は以下のとおりです。

・東京都内の清掃付きの社宅を無料でご提供
・光熱費を自社が負担
・社宅は生活備品(トイレットペーパーなど)、冷蔵庫やWifiを完備
・食費と、僅かではありますが、お小遣いを毎月支給

今期の初回募集人数は2名としています。

ご興味ありましたらご検討頂けたら幸いです。

宜しくお願い致します。




/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/


株式会社  ウイズ

システム営業 成田 浩二

東京都中央区銀座6-6-1 銀座風月堂ビル5F

TEL : 03-5537-6962
FAX : 03-5537-5281

Mail :kouji.n@wiz-system.co.jp


/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

コメントを書く