[nuxt/vue]백앤드 프록시 서버 설정하기 (vue.js 타 도메인 CROS 에러 해결하기)

Nuxt.js Proxy설정 (Axios Cros 에러 해결)

현재 상황은 프로젝트 파일에서

frontend 서버는 localhost:3000 이용하며,

backend 서버는 localhost:3001 이용 중이다.

이럴 경우 frontend 서버에서 axios에서 호출을 할 경우 CROS error가 발생했다.

 

frontend는 nuxt.js 이용 중인 상황일 때 해결 방법이다.

 

---

 

📌Nuxt Proxy 이용하기

1️⃣설치하기

nuxt에서 간편하게 프록시를 설정을 할 때 이용하는 라이브러리를 먼저 설치해주자

https://www.npmjs.com/package/@nuxtjs/proxy

@nuxtjs/proxy

npm install @nuxtjs/proxy --save

 

2️⃣nuxt.config.js 파일 설정하기

modules: [
    '@nuxtjs/proxy'
  ],
  proxy: {
    '/api': 'http://localhost:3001',
  }

설치해준 @nuxtjs/proxy는 module 등록해준 뒤

특정 url이 호출되면 백앤드 서버로 연동되도록 설정만 해주면 끝난다.

 

3️⃣vue파일에서 axios 호출하기

 axios.get('/api/특정URL')
   .then((res) => {
        console.log(res)
    });

실제 호출 시 /api/URL을 입력하면 CROS에러가 아니라 

결과값을 받아보는 것을 확인할 수 있다.