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

問題・質問

タイトルの通り，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}