Nuxt.js에서 API CORS 대책을하면 Netlify에서 404 오류가 발생합니다.

개요

Nuxt.js에서 CORS 오류가 발생하여 axios의 proxiy 설정을 수행했습니다.

Netlify에 배포하는 동안 404 오류가 발생했습니다.

Netlify 리디렉션 옵션을 설정하여 해결

Nuxt 설정

.env

BASE_API_URL="http://localhost"
BASE_CACHE_URL="http://localhost"

nuxt.config.js

const baseApiUrl = process.env.BASE_API_URL || "http://localhost";
const baseCacheiUrl = process.env.BASE_CACHE_URL || "http://localhost";

export default {
...
  /*
   ** Axios module configuration
   */
  axios: {
    credentials: true,
    proxy: true,
    debug: true
  },
  proxy: {
    "/caches/": baseCacheiUrl,
    "/game/": baseApiUrl,
    "/common/": baseApiUrl
  },

Nuxt 설정

로컬 환경에서의 동작 검증
성공적으로 API 통신이 가능한 패턴

Netlify에 배포

움직이지 않는다
API 응답은 200이 반환되었지만 404 페이지의 DOM이 반환되는 패턴

대책

static/_redirects
Netlify 리디렉션 옵션 설정
htps : // / cs. 네 tぃfy. 코 m / 로 센 g / 레 cts / 레

+ /game/*  https://api.deckup.cards/game/:splat  200
+ /common/*  https://api.deckup.cards/common/:splat  200
+ /caches/*  https://cache.deckup.cards/caches/:splat  200
/*    /index.html   200

결과