NuxtとGASでのCORSエラーに悩んだこと

きっかけ

Nuxt側からGASを動かして、GoogleFormを作成して、作成したGoogleFormのURLを返却したいことから始まりました。

結論

nuxt.config.js

axios: {
    baseURL: '/',
    proxy: true,
  },
  proxy: {
    '/api': {
      target:
        'GASのエンドポイント',
      pathRewrite: { '^/api': '' },
      followRedirects: true,
      // ↑これを追加したらいけました
    },
  },

以下は、過程などなので、見たい人だけ見てください！

過程

最初はこんなふうに怒られました。
このときはただのCORSエラーか
Proxyを設定しないといかんな程度で

nuxt.config.js

axios:{
  ///略///
  proxy: true
}

これでいけるわーーみたいに考えていたのですが、
またこの画面
。。。
あれ？俺POSTなのにGET？きちんと

index.vue

data() {
   return {
     title: "",
     googleFormUrl: ""
   }
 },
methods: {
    async gasApi() {
      await this.$axios.$post('/api',{
        // titleはGoogleFormのタイトルにする文字列を渡している
        title: this.title
      })
      .then((res)=>{
         this.googleFormUrl = res.url
      })
      .catch((error)=>{
       console.log(error)
       console.log("エラーです")
      })
    },
  },

index.gas

function doPost(e){
  const params =  JSON.parse(e.postData.contents);
  const createForm =  FormApp.create(params.text);
  const getUrl = createForm.getPublishedUrl();
  const qus =  createForm.addTextItem();
  qus.setTitle(e.title);
  //Nuxt側に返すときはJSONに戻してからpostする
  const output =  ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  output.setContent(JSON.stringify({ url: getUrl }));
  return output;
}

ここで自分はつよつよなエンジニアに質問しにいきました。

そしたら,GASの仕様で弾かれてると教えてもらいました！

原因としては、
OPTIONSが飛んでくるので、そのOPTIONSをきちんと200で返して(リダイレクトしてはいけない)、
次に、リダイレクト先だけCORS指定ない場合、これは普通のCORSエラーで落ちるので、しっかりとCORS指定をしておかなければならない。

結果、今回はGASのCORSについて学びました。