느린 개발자

이번 포스팅은 NuxtJS에서 Axios 구성과 Proxy 설정 방법에 대해서 설명해보려고 합니다.

회사에서 백엔드와 작업할때 CORS 문제와 API 작업에서 삽질했던 부분을 정리하고자 합니다.

---

 

 

CORS 란?

Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. 

 

1.  HTTP , HTTPS 와 같은 프로토콜이 다른경우
2.  domainA.com과 domainB.com처럼 도메인이 다른 경우
3.  8080 포트와 3000 포트처럼 다른 경우

이처럼 Cross-Origin  이란 위 3가지 중 한 가지라도 다른 경우를 말합니다.

 

 

CORS가 없이 모든 곳에서 데이터를 요청할 수 있으면, 다른 사이트에서 본인이 개발한 사이트를 흉내 낼 수 있게 됩니다.

즉 개발한 사이트에 대해서 악의적으로 정보를 추출하거나 다른 정보를 입력하여 공격하는 등 보안에 대한 큰 이슈가 생깁니다. 그래서 브라우저에서 보호하고 필요한 경우에만 서버파트와 협의하여 여러 방법으로 보안을 강화합니다.

 

 

보안 이슈 같은 경우 서버파트와 같이 논의하여 진행하면 됩니다.

위와 같은 정보를 기억하시며 저희는 로컬에서 서버 api에 대해서 cors 이슈 없이

proxy를 적용하여 통신하는 방법을 진행합니다.

 

---

 

Proxy 란?

프록시 서버는 클라이언트에서 서버로 접속을 할 때직접적으로 접속하지 않고 중간에 대신 전달해 주는 서버
를 의미한다.

 

 

Nuxt 에서 Axios 및 Proxy 설정 방법

 

• 진행하는 버전 내용입니다.  제가 진행할 때 이 버전을 사용하고 있는 거라, 지금 설명하는 내용과는 크게 작용되지 않습니다.

이름	버전
Nuxt	2.15.8
npm	8.12.1
node	16.15.1

 

• Package.json
  필요한 라이브러리를 설치합니다.

 

 

• nuxt.config.js

프로젝트 루트에 env폴더를 만들고. env.development 파일에다가 경로를 다 작성한 상태에서 (전부 URL 정보)

아래와 같이 구성합니다.

const envPath = `env/.env.${process.env.NODE_ENV}`
import dotenv from 'dotenv'
dotenv.config({path:envPath})

// ...생략

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

  env:{
    AXIOS_BASE_URL: process.env.AXIOS_BASE_URL,  //front 도메인 주소
    API_DEV:process.env.API_DEV,  // backend 도메인 주소
    API_DEV_CDN:process.env.API_DEV_CDN, // aws s3 cdn 주소
  },
  axios: {
    proxy:true,
    baseURL: process.env.AXIOS_BASE_URL,
    proxyHeaders: false,
    credentials: false
  },
  proxy: {
    '/api/': {
      target: process.env.API_DEV,
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    },
    '/cdn/': {
      target: process.env.API_DEV_CDN,
      pathRewrite: { '^/cdn': '' },
      changeOrigin: true
    }
  },

 

nuxt.config.js 설정에 대해서 설명을 이어가면, Proxy 모듈에서는 pathRewrite에 설정한  '/api/'라는 API 끝점에 target에 적은 URL로 모든 요청이 추가가 됩니다,  이제 사용법에 대해서 설명합니다.

 

• proxy로 설정된 '/api/' 뒤에 서버 API 관련 URL을 작성하여 요청합니다.

export let GetUser = (params)=>{
  return new Promise((resolve,reject)=>{
    axios.get(`/api/users`,{params})
      .then((data)=>{
        if(data.status === 200)
        {
          resolve(data)
        }
      })
      .catch((error)=>{
        console.log(error)
        reject(error)
      })
  })
}

 

 

• CDN에서 이미지나 영상을 받아와서 사용할 때에는 Proxy 설정한 대로  '/cdn/' 뒤에 작성하여 사용하면 됩니다.

 const url = `/cdn/${this.urlPath}`
 
 
 // img tag
<img alt='image' :src="`${url}`"/>

 

 

 

Axios interceptors 사용하기

느린 개발자