Nuxt.js Axios를 통해 CORS 오류 수정(Proxy)

해결책

nuxt.config.js

{
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    proxy: true,
  },

  proxy: {
    '/api/': 'http://api.example.com',
  }
}

해설

proxy

활성화

axios: {
  proxy: true,
}

nuxt/axios에 nuxt/proxy가 포함되어 있기 때문에 추가로 설치하거나 지정할 필요가 없다modules.

proxy에 사용할 경로 지정

proxy: {
  '/api1/': 'http://example.com',
  '/api2/': {
    target: 'http://example.com',
    pathRewrite: {'^/api/': ''}
  },
   '/api3/': {
    target: 'http://example.com',
    pathRewrite: {'^/api/': '/'}
  },
}

API 두드리기

.vue

this.$axios.get('/api1');      // http://example.com/api1
this.$axios.get('/api1/test'); // http://example.com/api1/test
this.$axios.get('/api2');      // http://example.com/api2
this.$axios.get('/api3');      // http://example.com
this.$axios.get('/api3/test'); // http://example.com/test

오른쪽 설명 섹션은 실제로 요청된 URL입니다.

총결산

설정nuxt/axios의proxy은 CORS 오류를 방지하고 API 등을 사용합니다.
각양각색의 사이트를 보면 이번 예/api1와/api2를 자주 볼 수 있지만 실제로 사용할 때는 보통/api3이 좋다.
잘못이나 문제가 있으면 마음대로 평론해 주세요.
Nuxt.js Axios module에서 CORS 오류에 대한 부드러운 대처 방법의 재작성.