【備忘録】Nuxt + APIGateWay 毎回CORSで引っかかる。対処法

4388 ワード
CORS nuxt APIGateway CORS テキストリンク

エラー

よく Nuxtでaxiosを利用するのですが、毎回このエラーで躓きます。

次引っかかった時のためにメモ

APIGatewayを確認する

デプロイする

Lambdaに追記

 return {
   'statusCode': 200,
   'headers': {
     'Content-Type': 'application/json',  // 追加
     'Access-Control-Allow-Origin': '*'   //追加
   },
   'body': JSON.stringify({ status:’ok’, })
 }

@nuxtjs/proxyを導入

nuxt.config.js

modules: [
    "@nuxtjs/axios",'@nuxtjs/proxy' //追記
  ],

proxy: {
    '/api': {
      target: "APIのURLを入力", // https://xxx-api.ap-northeast1.amazonaws.com/1
      pathRewrite: {
        '^/api' : "ページを開くURLを入力" // https://xxxxxxxxxxx.netlify.app
        }
      },
    },
index.vue

async register() {
      const response = await this.$axios.$post(
        "叩きたいAPIURL", // https://xx.ap-northeast-1.amazonaws.com/1/register
        {
          type: "new",
        }
      );
    },

2020/10/17追記

safariとchromeでcorsの処理が異なるらしく、アンドロイドでデバックしていたので気づかなかった。
iphoneやmac safariでエラーが多出し、困った。

特にプリフライトエラーでよくこけた。
これは単純なリクエストで無い場合にoptionリクエストが送られる。
このリクエストでエラーが出ていたために発生したエラーだった。

対処法としては、

エンドポイントんいoptionsメゾットを追加し、

Mockエンドポイントへとつなげた。

他にもいろいろ試してみた方法があったため記述する。


参考文献