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

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

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

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

Google Apps Script

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

Q&A

解決済

1回答

2117閲覧

gasでつくったAPIをAXIOSで読み込めない。

e-homes

総合スコア11

Vue.js

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

Google Apps Script

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

0グッド

1クリップ

投稿2019/01/30 04:16

前提・実現したいこと

GoogleAppScript(gas)の環境でaxiosとvue.jsとElementというvue.jsのコンポーネントライブラリを使用して連絡先を登録するような簡単なwebアプリを作成しています。
登録済みのデータをテーブルに表示させてるためにaxiosでgasで作ったapiにアクセスするのですが、データを読み込むことができず表示できません。
みようみまねの我流で勉強してきましたので基本がなってないと思いますが、分かる方どうか宜しくお願い致します。

発生している問題・エラーメッセージ

axiosのchatchメソッドでコンソールログに書き出したところ Error: Network Error at e.exports (spread.js:25) at XMLHttpRequest.l.onerror (spread.js:25) というエラーがでていました。

該当のソースコード

html

1gasのmyWorksというプロジェクトファイルのindex.htmlです。 2<!DOCTYPE html> 3<html> 4 <head> 5 <base target="_top"> 6 <!-- css 読み込み ---------------------------------------------------> 7 <?!= HtmlService.createHtmlOutputFromFile('1-2 css').getContent(); ?> 8 </head> 9 <body> 10  <div id="app"> 11 <!-- コンテナ --> 12 <el-header> 13 <el-container> 14 <!-- title --> 15     <h1>My Works</h1> 16 </el-container> 17 <!-- tab-------------------> 18 <el-tabs type="border-card"> 19 <el-tab-pane label="連絡先"> 20 <!-- 連絡先 ------------------------------------------------------------------> 21 <template> 22 <el-table :data="tableData" style="width: 100%"> 23 <el-table-column prop="no" label="NO" width="80"> 24 </el-table-column> 25 <el-table-column prop="date" label="登録日" > 26 </el-table-column> 27 <el-table-column prop="name" label="名前" > 28 </el-table-column> 29 <el-table-column prop="kana" label="かな"> 30 </el-table-column> 31 <el-table-column prop="remark" label="備考" > 32 </el-table-column> 33 </el-table> 34 </template> 35 </el-tab-pane> 36 <el-tab-pane label="プロジェクト">プロジェクト</el-tab-pane> 37 </el-tabs> 38 <el-main> 39 </el-main> 40 </el-header> 41  </div> 42 <!-- javascript 読み込み --> 43 <?!= HtmlService.createHtmlOutputFromFile('1-3 js').getContent(); ?> 44 </body> 45</html>

js

1gasのmyWorksというプロジェクトファイルの1-3 jsです。 2 3 4<script src="//unpkg.com/vue/dist/vue.js"></script> 5<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script> 6<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 7 8 9<script> 10var Main = { 11 data() { 12 return { 13 tableData: [] 14 } 15 }, 16 mounted () { 17 axios 18 .get("gasでつくったapiのURL") 19 .then(response => {this.tableData = response.data;}) 20 .catch(error => {console.log(error);}); 21 }}; 22var Ctor = Vue.extend(Main) 23new Ctor().$mount('#app') 24</script>

js

1gasでつくったapi。api-myWorksというプロジェクトファイルの1-1 doGet.jsです 2 3function doGet(e) { 4 var json = {}; 5 json =連絡先データ; 6 7 var output = ContentService.createTextOutput(); 8 output.setMimeType(ContentService.MimeType.JSON); 9 output.setContent(JSON.stringify(json)); 10 return output; 11} 12

補足情報

アプリケーションにアクセスできるユーザーと実行ユーザーは自分にしてあります。

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

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

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

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

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

papinianus

2019/01/30 04:31 編集

アプリケーションにアクセスできるユーザーが自分だと、ログインしなければ(つまり自分にならなければ)APIにアクセスできないと思うのですが、どこで認証していますか? もしくは、ひとまず匿名アクセス可能にして、webアプリケーションを公開し直してみていかがでしょうか? あと、spread.jsってどれですか?
guest

回答1

0

自己解決

自己解決しました。jsonを返すように作っていたapi-myWorksの1-1 doGet.jsですがアクセスするときはhttps://script.google.comのドメインなのですが、結果を返す時はhttps://script.googleusercontent.comというドメインにリダイレクトされていたのに気づきました。
なのでaxios.jsonpメソッドでアクセスして、apiもjsonpで返すようにしたことにより問題解決しました。
papinianus様のアドバイスを確認している間に偶然わかりました。素早いアドバイスありがとうございました。

投稿2019/01/30 08:12

e-homes

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問