사건

구구했을 때 더 잡아도 좋을 것이라고 생각하면서, 전혀 기사가 히트하지 않았기 때문에 메모.

Nuxt.js에서 axios를 사용하여 API에서 데이터를 가져옵니다.
그 데이터를 바탕으로 페이지를 표시하고 있는 경우, URL을 직접 두드리면 정상적으로 표시되지만, nuxt-link로 천이 하거나 브라우저 백으로 이동하면 An error occurred 라는 에러가 나온다.

참고: Chrome 개발자 도구 열 때 오류

결론

nuxt.config.js에서 axios 프록시를 설정합시다.

이유

CORS(원본간 리소스 공유) 때문입니다.

URL을 직접 열 때 = SSR (서버 사이드 렌더링)이 실행됩니다. 이름에 따라 서버 측에서 실행됩니다.

브라우저 백이나 페이지 천이 = CSR (클라이언트 측 렌더링)이 실행된다. 즉 클라이언트의 js에서 실행되므로 CORS가 관련되어 온다.

URL 두드렸을 때 표시되는 경우 API의 경로가 잘못되거나 처리가 이상하지 않습니다.
서버 측과 클라이언트 측, 어느 쪽에서 실행되고 있는지 깨닫는지가 열쇠.
필자는 1시간 이상 고민

비록 같은 서버상에서 움직이고 있어도, 백엔드와 프런트 엔드(Nuxt)가 다른 port로 움직이고 있으면, CORS의 대책이 필요.

대처법

nuxt.config.js

   ** Nuxt.js modules
   */
   modules: [
-    "@nuxtjs/axios"
+    "@nuxtjs/axios",
+    "@nuxtjs/proxy"
   ],
+  axios: {
+    proxy: true
+  },
+  proxy: {
+    '/v1/': {
+      target: "https://example.com:8080/"
+    }
+  },

참고(API 호출):pages/posts/_id.vue

<script>
export default {
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  async asyncData({ $axios, params }) {
    const response = await $axios.$get(`/v1/posts/${params.id}`)
    return {
      post: response.post
    }
  }
}
</script>

@nuxtjs/proxy는 axios에 세트로 들어 있기 때문에 yarn add가 필요하지 않습니다

/v1/부분은 API의 경로에 따라 변경하십시오. 종종/api/가되어야합니다

target 부분은 API의 루트 패스가 되도록(필요하면 port 번호도) 적절히 치환해 주세요.