0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Node.js/FrontendからGASへfetch

Posted at

NuxtアプリからGASへpostしたい

GAS(Google Apps Script)からプログラミングに入ったノンプログラマーですが、
最近はNuxt.jsを勉強してみています!

GASは、公開したWebアプリをAPIサーバとして利用して、
スプレッドシートやドライブ、GmailなどのGoogleサービスを手軽に操作できるのが魅力の1つですね!

その中で1つ、ハマったことがありましたので、備忘録代わりにまとめます。

Vue2系ベースの記事ですが、Vueはそんな関係ないです

axiosだとびみょい

Nuxtアプリを立てる際に、オプションでaxiosモジュールを入れるか訊かれますね。
私も「んじゃaxiosで!」と入れ、gas側も用意。
早速動かそうとしてみましたが、バックエンドからだとCORSエラーを吐きます…
GAS側の実行履歴にはログすら残ってねぇですね。

どうやら、参考記事にもあるように、XmlHttpRequestがうまくないよう。

api/gas.js これが通らん
import axios from 'axios';
const post = async (postData = {}) {
  const options = {
    'Content-Type': "application/json"
  }
  try {
    const res = await axios(GAS_ENDPOINT_URL, JSON.stringify(postData), options);
    const json = await res.text();
    return JSON.parse(json);
  } catch (e) {
    console.error(e.stack);
    return null;
  }
}
export default post;
main.gs GAS側
function doPost(e) {
  return ContentService.createTextOutput().setMimeType(ContentService.MimeType.JSON).setContent(JSON.stringify({ result: 'ok!', e }));
}

フロントからなら、content-typeをform形式に指定すれば通りますね。

pages/index.vue
// js部分だけ
export default {
  methods: {
    async post(postData = {}) {
      const options = {
        'content-type': 'x-www-form-urlencoded',
        mode: 'no-cors'
      }
      try {
        const res = await this.$axios.post(GAS_ENDPOINT_URL, postData, options);
        const json = await res.text();
        return JSON.parse(json);
      } catch (e) {
        console.error(e.stack);
        return null;
      }
    }
  }
}

node-fetchならフロントからもバックエンドからもOK

じゃあnpmパッケージを変えてみるか!と、fetch API系のnode-fetchをインストール。

pages/index.vue こりゃ通る
// js部分だけ
import fetch from 'node-fetch';
export default {
  methods: {
    async post(postData = {}) {
      const options = {
        method: "post",
        'Content-Type': "application/json",
        body: postData
      }
      try {
        const res = await fetch(GAS_ENDPOINT_URL, options);
        const json = await res.text();
        return JSON.parse(json);
      } catch (e) {
        console.log(e.stack);
        return null;
      }
    }
  }
}
api/gas.js バックエンドからも通る
import fetch from 'node-fetch';
const post = async (postData = {}) {
  const options = {
    method: "post",
    'Content-Type': "application/json",
    body: JSON.stringify(postData)
  }
  try {
    const res = await fetch(GAS_ENDPOINT_URL, options);
    const json = await res.text();
    return JSON.parse(json);
  } catch (e) {
    console.log(e.stack);
    return null;
  }
}
export default post;

参考記事

https://www.bugbugnow.net/2019/06/gasweb.html
https://knmts.com/become-engineer-31/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?