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

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

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

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

Google Apps Script

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

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

解決済

Vue.jsからaxiosを使ってGASのAPIを叩くとCORSエラーになる

aheshiyu_tt
aheshiyu_tt

総合スコア11

Vue.js

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

Google Apps Script

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

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

1回答

0グッド

0クリップ

509閲覧

投稿2022/11/03 05:17

問題・質問

タイトルの通り,Vueからaxiosを利用してGASのAPIを叩くと以下のCORSエラーになるのですが,どのようにすれば解決するでしょうか.

Access to XMLHttpRequest at 'GASのウェブアプリURL' from origin 'http://localhost:8888' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

調べたこと

調べてみたところ,axiosのヘッダー情報をAccess-Control-Allow-Origin: *にする方法などがヒットしましたが,うまくいきませんでした.
その他,かたっぱしに調べてみましたが,以下のソースをどのように修正すればよいかも分からず結局止まってしまいました.

プログラム一覧

以下に現在のプログラムを貼ります.

  • これらはすべてvue create hoge-appコマンドで作成した中身になります.
  • GASのスクリプトは,デバッグした結果が正しく動作していました(GAS側のエラーもCORSになると聞いたため)

具体的な解決策が分からない場合でも,あえて回答していただきたいのが,そもそもVueからGASのAPIを叩くやり方はこれで正しいでしょうか? できれば,どのように記述すればよい,このサイトが参考になる,といった情報が知りたいです.

本当に,とりあえずスプレッドシートからGASを経由してデータが取得さえできれば良いのですが,それすらできずに全く先に進めません・・

よろしくお願いします.

js

1 2/* /src/views/Home.vue */ 3 4<template> 5 <v-btn @click="onDownload">テスト用</v-btn> 6</template> 7 8<script> 9export default { 10 name: 'Home', 11 data() { 12 return { 13 // いろいろなデータ 14 } 15 }, 16 17 methods: { 18 async onDownload() { 19 const res = await this.$axios.fetch() 20 console.log(res) 21 } 22 } 23} 24</script>

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/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 = "デプロイしたGASのウェブアプリURLを直書き" 14 15gasApi.fetch = () => { 16 const res = gasApi.get(apiUrl) 17 return res 18} 19 20export default gasApi

js

1 2/* GASのスクリプトです */ 3 4const ss = SpreadsheetApp.getActive() 5 6function test() { 7 console.log("以下はテストです") 8} 9 10function response(content) { 11 const res = ContentService.createTextOutput() 12 res.setMimeType(ContentService.MimeType.JSON) 13 res.setContent(JSON.stringify(content)) 14 return res 15} 16 17function doGet(e) { 18 const monster_data = getMonsters() 19 console.log(monster_data) 20 const result = response(monster_data) 21 return result 22} 23 24function getMonsters() { 25 const sheet = ss.getSheetByName("monsters") 26 const lastRow = sheet ? sheet.getLastRow() : 0 27 const list = sheet.getRange('A2:D' + lastRow).getValues().map(row => { 28 const [id, monster_id, name, image_path] = row 29 return { 30 id, 31 monster_id, 32 name, 33 image_path 34 } 35 }) 36 return list 37}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

ockeghem

2022/11/03 06:44

「axiosのヘッダー情報をAccess-Control-Allow-Origin: *にする」というのは間違いです。このヘッダはGAS側のレスポンスヘッダとして出力する必要があります。 原因を知るため、現状のレスポンスヘッダを追記してください。
aheshiyu_tt

2022/11/03 13:39

コメントありがとうございます. 上記ヘッダを削除したら適切に動作しました.試行錯誤をしすぎた結果,本当にそれを削除しただけで動作するようになったかは不明ですが,ご助言ありがとうございました.

回答1

0

自己解決

axiosのヘッダ情報から以下の情報を取り除いたら適切に動作しました.
自己解決ですが,本当にそれだけで解決したとは思えず,それを含むさまざまな試行錯誤でコードをいじり倒した結果動作したのかもしれません・・
ひとまず,解決してよかったです.

js

1Access-Control-Allow-Origin: "*"

投稿2022/11/03 13:41

aheshiyu_tt

総合スコア11

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Google Apps Script

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

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。