質問・問題
現在,Vue.js+GASでWebアプリを開発しています.
相互の通信にはaxiosを利用していますが,以下の2つの分からない点・問題点があり苦戦していますため,ご教授願いたいです.
-
GASのdoPostが動作しません.当該のプログラムは以下の通りですが,axios側で
.post()
関数を実行しても,GAS側ではdoGet
が動作してしまいます.その証拠に,doGet
関数を削除し,doPost
関数のみでデプロイし実行すると「スクリプト関数が見つかりません: doGet」とエラーが表示されてしまい,CORSエラーになります.また,axios側を.get()
関数に置き換えても,もちろんdoGet
が実行されてしまいます.とりあえず,何をしてもdoGet
が実行されてしまう状況です. -
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}
あなたの回答
tips
プレビュー