質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Q&A

0回答

486閲覧

axiosから呼び出すGASのdoPostが動作しません

aheshiyu_tt

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

0グッド

0クリップ

投稿2022/11/04 02:28

質問・問題

現在,Vue.js+GASでWebアプリを開発しています.
相互の通信にはaxiosを利用していますが,以下の2つの分からない点・問題点があり苦戦していますため,ご教授願いたいです.

  1. GASのdoPostが動作しません.当該のプログラムは以下の通りですが,axios側で.post()関数を実行しても,GAS側ではdoGetが動作してしまいます.その証拠に,doGet関数を削除し,doPost関数のみでデプロイし実行すると「スクリプト関数が見つかりません: doGet」とエラーが表示されてしまい,CORSエラーになります.また,axios側を.get()関数に置き換えても,もちろんdoGetが実行されてしまいます.とりあえず,何をしてもdoGetが実行されてしまう状況です.

  2. axios側からGAS側にデータを渡すにはどのようにすればよいでしょうか.以下のプログラムではgasApi.fetch = () => {以下がそれに該当しますが,ここでは.post()関数内においてapiUrlの他にオブジェクト形式で{ method: 'get_user' }を追加で引数に渡しています.何がやりたいのかといいますと,こちらでメソッドを指定し,GAS側のswitch文を利用して処理を変えたいと思っています(そもそもそのようなやり方が正しいのかは分かりません・・).すなわち,get_usersを指定すればユーザ情報が取得でき,get_hogehogeでそれ以外の情報も取得できるようにしたいというこどです.

以上です.よろしくお願いします.

※以下のプログラムはvue create hogehogeコマンドで生成したディレクトリ内の話です.

js

1 2/* /src/api/index.js */ 3/* apiフォルダとindex.jsは自分で追加で作成しました */ 4 5import axios from 'axios' 6 7const gasApi = axios.create({ 8 headers: { 9 'content-type': 'application/x-www-form-urlencoded', 10 } 11}) 12 13const apiUrl = "https://script.google.com/APIURL/exec" 14 15gasApi.fetch = () => { 16 console.log('fetch!!') 17 return gasApi.post(apiUrl, { 18 method: "get_users", 19 }) 20}

js

1 2/* /src/main.js */ 3 4import Vue from 'vue' 5import App from './App.vue' 6import router from './router' 7import store from './store' 8import vuetify from './plugins/vuetify' 9import gasApi from './api' // 追加 10 11Vue.config.productionTip = false 12Vue.prototype.$axios = gasApi // 追加 13 14new Vue({ 15 router, 16 store, 17 vuetify, 18 render: h => h(App) 19}).$mount('#app')

js

1 2/* /src/views/Home.vue */ 3 4<template> 5 <!-- デザインなど --> 6</template> 7<script> 8 name: 'Home', 9 10 data() { 11 return { 12 // 各種データ 13 } 14 }, 15 16 methods: { 17 // 各種メソッド 18 }, 19 20 async mounted() { 21 const res = await this.$axios.fetch() 22 console.log(res) 23 } 24</script>

js

1 2/* api.gs */ 3 4const ss = SpreadsheetApp.getActive() 5 6function doPost(e) { 7 Logger.log(e) 8} 9 10function doGet(e) { 11 // Logger.log(e) 12 doPost(e) 13}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問