プログラミング フロントエンド

【GAS × Javascript】GASに対してAPIリクエストを送ったら、corsエラーになってしまう原因と対策

こんにちは!

今回は「JavascriptでGASに対してAPIリクエストを送ったら、corsエラーになってしまう原因と対策」についてお伝えしたいと思います。

あくまで一例ですので、原因は他の場合もあります。
予めご了承ください。

エラー内容:GASのAPIに対してリクエストを送ると、corsエラー

GASのAPIに対してリクエストを送ると以下のエラーがフロントで表示されました。

Access to fetch at 'https://script.google.com/macros/s/AKfycbyDJCmxBheCcjaCcavyHAUBPZtQMGdq_lwLrVQoXUcO5Wwda9D-NPISaCyKU_P98QQCxw/exec' 
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.

cors(クロスオリジン)のエラーで怒られているようです。

エラー原因:コードのレスポンスでオブジェクトを返却しているのが原因だった

色々原因を調べたところ、クロスオリジンは関係なく、APIレスポンスの形に問題がありました。

エラーとなったコードは以下のようにオブジェクトをそのまま返却していました。

NG例

// // GASのAPI処理
const gasApi = () => {
  const result = {name: 'taro'};
  return result;
};

一見問題なさそうに見えますが、これがcorsエラーの原因でした。。

エラー対策:レスポンスのオブジェクトをContentService.createTextOutput()を使って返却する

オブジェクトをそのまま返却するのではなく、ContentService.createTextOutput(JSON.stringify(object))で変換して返却することで解決しました!

ContentService.createTextOutput() はGASに元々用意されているので、定義する必要はありません。

先程のコードを修正したのが以下になります。

OK例

// // GASのAPI処理
const gasApi = () => {
  const result = ContentService.createTextOutput(JSON.stringify({name: 'taro'}))
  return result;
};
 

これでcorsエラーは表示されなくなりました!
以上、お疲れさまでした〜🍵

-プログラミング, フロントエンド
-

© 2022 エンジニア×ライフハック Powered by AFFINGER5