오류

자주 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의 처리가 다른 것 같고, 안드로이드로 디버그하고 있었기 때문에 눈치채지 못했다.
아이폰이나 맥 사파리에서 오류가 많아 곤란했다.

특히 프리플라이트 에러로 잘 뚫렸다.
이것은 간단한 요청이 아닌 경우 option 요청을 보냅니다.
이 요청에서 오류가 발생했기 때문에 발생한 오류였습니다.

대처법으로는


엔드 포인트는 options 메조트를 추가하고

Mock 엔드 포인트로 연결되었습니다.

그 밖에도 여러가지 시도한 방법이 있었기 때문에 기술한다.

참고문헌