Nuxt SSR만 API처리가 안될때 (feat. CORS)

개요

axios proxy설정으로 인해 CSR일때는 문제가 없지만 SSR일때는 API 에러가 발생해서 해결하는 과정

 

우선 서버쪽의 CORS 설정으로써

Access-Control-Allow-Origin: *

로 되어있으면 좋겠지만 위의 설정이 되어 있지 않았기 때문에

axios를 쓸 때 proxy를 설정해주었다.

(proxy설정을 위해서는 @nuxtjs/proxy가 필요한데 아마 대부분 @nuxtjs/axios를 설치하면 같이 설치된다. node_modules에서 확인)

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
  // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
  // baseURL: 'http://localhost:7070/api/checkout/',
  proxy: true,
},
proxy: {
  '/api/checkout/': {
    target: 'http://localhost:7070/',
    path: {
      '^/api/checkout/': '/api/checkout/',
    },
    changeOrigin: true,
  },
},

async fetch() {
  const { data } = await this.$axios.post('/api/checkout/orders/confirm', {
    source: this.$route.query.source,
  })
  console.log(data)
},

이렇게하면 CSR에서는 잘되지만 SSR에서는 이상하게 404로 에러가 떴었다.

참고로 SSR에서는 proxy설정 자체가 필요없다. CORS는 SOP를 회피? 하기 위해 나온 친구인데 이는 브라우저 에만 해당된다 SSR은 하나의 서버에서 작업이 이루어지는 것이므로 브라우저가 아니다.

CORS란 ? 

SOP로 인해 다른 출처의 선택한 자원에 접근할 수 없게 되었지만 전부 그렇게 제한해 버리면 곤란하기 때문에 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제인 CORS가 등장했다.

(SOP = 브라우저에서 보안적인 이유로 같은 origin이 아니면 HTTP 요청들을 제한하는것)

 

원인은 확실하게 모르겠지만 proxy 설정이 나중에? 불려지는것 같다.

 

그러므로 SSR일때는 따로 baseURL을 설정한다.

import axios from 'axios'

const instance = axios.create({
  baseURL: process.browser ? '' : process.env.API_HOST, // 추가
})
export default instance