Q&A
GoogleAppsScriptで自作したフォームからスプレッドシートに投稿する際に405エラーが出る問題について質問させて頂きます。
自作のGASフォーム(※公開範囲は自分のみ)にvuetifyを適用し、
後述のindex.html,コード.gs,complete.htmlを記述しました。
フォームであるindex.htmlからdoPost(e)で投稿後にcomplete.htmlに遷移させます。
フォーム入力後のsubmitボタン押下後にコンソールで下記のような405エラーとなります。
Failed to load https://script.google.com/macros/s/(省略)/exec: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://(省略)by-0lu-script.googleusercontent.com' is therefore not allowed access. The response had HTTP status code 405. Uncaught (in promise) Error: Network Error at e.exports (spread.js:25) at XMLHttpRequest.l.onerror (spread.js:25)
GASのCORSに起因する問題だとは考えられるのですが(参考 https://stackoverflow.com/questions/29525860/google-apps-script-cross-domain-requests-stopped-working/29529913)、
CORS周りの知識が浅く解決できずに居ます。
追記・修正すべき内容のアドバイスをいただけないでしょうか。
よろしくお願い致します。
※参考までにindex.html,コード.gs,complete.htmlの記述内容を下記に添付させていただきます。
index.html <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> </head> <body> <div id="app"> <v-app> <v-form v-model="valid" ref="form" lazy-validation> <v-text-field label="Name" v-model="name" :rules="nameRules" :counter="10" required ></v-text-field> <v-text-field label="E-mail" v-model="email" :rules="emailRules" required ></v-text-field> <v-btn @click="submit" :disabled="!valid" > submit </v-btn> <v-btn @click="clear">clear</v-btn> </v-form> </v-app> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el: '#app', data: () => ({ valid: true, name: '', nameRules: [ v => !!v || 'Name is required', v => (v && v.length <= 10) || 'Name must be less than 10 characters' ], email: '', emailRules: [ v => !!v || 'E-mail is required', v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$/.test(v) || 'E-mail must be valid' ], }), methods: { submit () { if (this.$refs.form.validate()) { // Native form submission is not yet supported axios.post('https://script.google.com/macros/s/(ウェブアプリケーションのURL)/exec', { name: this.name, email: this.email, },{ emulateJSON: true }) } }, clear () { this.$refs.form.reset() } } }) </script> </body> </html>
コード.gs
function doGet(e) { return HtmlService.createTemplateFromFile('index').evaluate() .addMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui'); } function doPost(e) { this.updateSpreadSheet(e); return HtmlService.createHtmlOutputFromFile("complete"); } function updateSpreadSheet(e) { var f = e.parameter; var sheet = SpreadsheetApp.openById("(スプレッドシートのID)"); var table = sheet.getSheetByName("(シートの名前)"); var array = [[f.name, f.email]]; table.getRange(1,1,1,2).setValues(array); }
complete.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> スプレッドシートへの投稿完了 </body> </html>
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2018/05/08 13:26