[FRONT] Nuxt.js proxy

[FRONT]

로직 개선하다가 에러 발생도하고 문제가 무엇인지 찾아보다가 cors와 proxy를 통한 서버통신을 정리

1. CROS?

CORS(Cross-Origin Resource Sharing)은 웹 브라우저에서 보안 기능의 일환으로 구현된 개념으로, 특정 리소스(API나 웹 페이지 등)가 원본과 다른 출처(도메인, 프로토콜, 포트)에서 요청될 때 이를 제어하는 역할을 합니다.

CORS의 존재 이유

동일 출처 정책(SOP): 브라우저는 기본적으로 동일한 출처에서만 리소스를 요청할 수 있도록 제한하는 동일 출처 정책을 따릅니다. 이는 악의적인 사이트가 사용자의 정보를 탈취하는 것을 방지하기 위한 보안 조치입니다.

CORS의 동작 방식

만약 웹 페이지가 다른 출처의 리소스를 요청하면, 브라우저는 자동으로 CORS 요청을 생성합니다.
요청된 서버가 특정 헤더(예: Access-Control-Allow-Origin)를 통해 이 요청을 허용할 수 있음을 브라우저에 알려줍니다.
브라우저가 이 응답을 확인하고, 요청이 허용된 경우에만 리소스에 접근할 수 있습니다.

예시

만약 example.com의 웹 페이지가 api.anotherdomain.com에서 데이터를 가져오려고 하면, api.anotherdomain.com은 CORS 정책을 통해 example.com에서의 요청을 허용해야 합니다. 그렇지 않으면, 브라우저는 이 요청을 차단합니다.

CORS는 이와 같이 서로 다른 출처 간의 리소스 공유를 안전하게 관리하도록 도와주는 중요한 웹 보안 기능입니다.

2. PROXY?

프록시(proxy)는 컴퓨터 네트워크에서 중간에 위치하여 클라이언트와 서버 간의 통신을 중계하는 역할을 하는 서버나 소프트웨어를 의미합니다. 프록시는 클라이언트의 요청을 받아서 대신 서버에 전달하고, 서버의 응답을 다시 클라이언트로 전달하는 중간자 역할을 합니다.

프록시의 주요 역할

보안 및 익명성: 프록시를 사용하면 클라이언트의 IP 주소가 서버에 직접 노출되지 않기 때문에 익명성을 유지할 수 있습니다. 또한, 특정 사이트에 접근할 때 프록시를 통해 우회 접속이 가능합니다.
캐싱(Caching): 프록시는 자주 요청되는 데이터를 캐싱(저장)하여, 동일한 요청이 들어올 때 서버에 다시 요청하지 않고 캐시된 데이터를 클라이언트에 전달함으로써 응답 속도를 향상시킬 수 있습니다.
접근 제어: 회사나 기관에서는 프록시 서버를 통해 특정 웹사이트에 대한 접근을 차단하거나 제한할 수 있습니다. 이는 조직의 정책에 따라 비생산적이거나 위험한 사이트에 대한 접근을 방지하는 데 사용됩니다.
콘텐츠 필터링: 프록시 서버는 특정 유형의 콘텐츠(예: 성인물, 폭력적 콘텐츠 등)를 필터링하여 사용자가 접근하지 못하게 할 수 있습니다.

프록시의 종류

정방향 프록시(Forward Proxy): 클라이언트가 프록시 서버를 통해 외부 서버에 접근하는 방식입니다. 사용자가 직접 인터넷에 접근하는 대신, 프록시 서버가 대신 요청을 처리합니다.
역방향 프록시(Reverse Proxy): 서버 측에서 클라이언트의 요청을 받아 여러 내부 서버로 분배하는 방식입니다. 주로 로드 밸런싱, 보안 강화, 캐싱 등에 사용됩니다.

예시

회사 내의 사용자가 example.com에 접속하려고 할 때, 프록시 서버를 통해 접속하면 해당 요청이 프록시 서버에 전달되고, 프록시 서버가 example.com과 통신하여 데이터를 받아 사용자에게 전달합니다.

3. CORS와 프록시의 상호관계

1. CORS 우회(CORS Bypass)와 프록시

CORS는 기본적으로 웹 브라우저에서 다른 출처(origin)에서 리소스를 요청할 때 보안을 위해 제한을 가하는 기능입니다. 하지만 개발자나 시스템 관리자들은 종종 CORS 제한을 우회하기 위해 프록시를 사용합니다.
예를 들어, 클라이언트가 CORS 제한으로 인해 직접 접근할 수 없는 API에 접근해야 할 경우, 클라이언트는 프록시 서버를 통해 API 요청을 보낼 수 있습니다. 프록시 서버는 클라이언트와 같은 출처에 있으므로 CORS 제한 없이 요청을 처리할 수 있습니다.

2. 역방향 프록시와 CORS 관리

역방향 프록시는 서버 측에서 클라이언트의 요청을 받아 여러 내부 서버로 분배하는 방식입니다. 이 프록시 서버에서 CORS 헤더를 설정할 수 있습니다.
예를 들어, 클라이언트의 요청이 역방향 프록시를 통해 전달될 때, 프록시 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 클라이언트가 다른 출처의 리소스에 접근할 수 있도록 허용할 수 있습니다. 이를 통해 CORS 문제를 서버 측에서 제어할 수 있습니다.

3. 보안 강화

프록시는 클라이언트의 IP 주소를 숨기고 요청을 대신 처리하는 기능을 가집니다. 이 경우, CORS는 여전히 작동하지만, 프록시 서버를 통해 요청을 전송하면 원래의 출처가 노출되지 않으므로 클라이언트 측의 보안이 강화됩니다.
또한, 프록시 서버에서 특정 출처의 요청만 허용하거나 차단할 수 있기 때문에, CORS와 함께 사용하여 더 정밀한 보안 정책을 설정할 수 있습니다.

정리

CORS는 웹 브라우저에서 동일 출처 정책을 적용해 보안을 유지하는 데 사용되며, 프록시는 네트워크 요청을 중계하고 관리하는 역할을 합니다.
프록시는 CORS 제한을 우회하는 데 사용될 수 있으며, 역방향 프록시를 통해 CORS 정책을 중앙에서 관리할 수도 있습니다. 이 두 개념은 함께 사용되어 웹 애플리케이션의 보안과 유연성을 높이는 데 기여할 수 있습니다.

3. nuxt.js proxy설정

1. 모듈 설치

먼저 @nuxtjs/axios와 @nuxtjs/proxy 모듈을 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요:

$ npm install @nuxtjs/axios @nuxtjs/proxy

2. nuxt.config.js 파일 설정

설치가 완료되면, Nuxt.js 프로젝트의 nuxt.config.js 파일을 열고 axios와 proxy 설정을 추가합니다.

//nuxt.config.js
export default {
  modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
  axios: {
    proxy: true, // 프록시 사용을 활성화
  },
  proxy: {
    // 프록시 설정
    "/api/": {
      target: "https://api.example.com", // 실제 API 서버 주소
      changeOrigin: true,
      pathRewrite: { "^/api/": "" }, // 경로 재작성
    },
  },
};

3. 설정 설명

@nuxtjs/axios 모듈: Nuxt.js에서 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 모듈입니다. 프록시 설정을 활성화하기 위해 proxy: true를 설정합니다.
@nuxtjs/proxy 모듈: 실제 API 서버로의 요청을 프록시 서버를 통해 전송할 수 있게 합니다. 여기에서 /api/ 경로에 대한 요청은 https://api.example.com으로 프록시됩니다.
target: 프록시가 요청을 전달할 대상 서버를 지정합니다.
changeOrigin: true로 설정하면, 프록시 요청에서 원래의 출처(origin)를 대상으로 설정합니다. 이것은 대부분의 프록시 요청에서 필요합니다.
pathRewrite: 경로 재작성 규칙을 정의합니다. 예를 들어, 클라이언트 측에서 /api/로 요청하면 실제로는 /로 재작성되어 API 서버로 전달됩니다.

4. 사용 예시

프록시 설정을 완료한 후, 이제 애플리케이션 내에서 Axios를 사용하여 API 요청을 보낼 때, 프록시를 통해 요청이 처리됩니다.

export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get("/api/some-endpoint");
    return { data };
  },
};

위 코드에서 /api/some-endpoint로 요청하면, 설정된 프록시를 통해 https://api.example.com/some-endpoint로 요청이 전송됩니다.

정리

이렇게 Nuxt.js에서 프록시를 설정하면 CORS 문제를 우회하거나, 보안 및 로드 밸런싱을 위해 API 요청을 프록시 서버를 통해 처리할 수 있습니다. nuxt.config.js 파일에서 프록시 설정을 잘 구성하면 애플리케이션에서 간편하게 프록시 기능을 활용할 수 있습니다.

my-domain.co.kr -> other-domain.co.kr -> my-domain.co.kr/api/사용할 server주소 (nuxt.js)ssr로 받아서 api 토스가능 -> 서버통신 가능 -> 원하는 작업실행

외부 도메인은 cors정책으로 api 호출이 불가한사항
내부 도메인으로 넘겨와/api proxy설정으로 서버통신가능

cors와 proxy