초간단 프록시 서버 만들어서 CORS 에러 해결하기

여름

 

하이~ 

오늘은 이전에 맞닥뜨렸던 문제 중 하나인, CORS 해결하는 방법에 대해 작성해두려고 한다!

외부 API를 호출하는 경우, CORS 에러가 뜨는 경우를 종종 볼 수 있다.

 

CORS 에러 발생 이유

CORS(Cross-Origin Resource Sharing) 에러는 브라우저의 동일 출처 정책(Same-Origin Policy)에 의해 발생한다
이 정책은 보안상의 이유로, 웹 페이지가 로드된 도메인과 다른 도메인에 있는 리소스에 접근할 때 제한을 두기 위해 설계되었다. CORS 에러는 브라우저가 외부 도메인으로부터의 요청을 허용하지 않을 때 발생한다.

 

CORS 에러에 대한 해결책은 다양하게 있다.

1. 서버에서 CORS 헤더 설정

2. 프록시 서버 사용

3. 브라우저 확장 프로그램 사용

4. CORS 프록시 서비스 사용

 

서버에서 코드를 변경해야하는 1번은 보류. 2,3,4번의 해결책이 있다.
그 중 3번은 임시 해결책의 느낌이 강하기 때문에 이것도 보류한다.

 

2, 4번의 해결방안을 적용해봤는데, 4번은 그냥 단순히 아래와 같은 적용을 하면 된다.

fetch('https://cors-anywhere.herokuapp.com/https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

이 방법은 외부 서비스에 의존하기도 하고, 요청에 제한이 있을 수도 있다는 생각에(위 방법으로 해보긴 했음ㅋㅋ)
간단한 프록시 서버를 구축해보려고 한다!
이전 회사에서 NestJS 사용하여 백엔드 코드를 수정해봤었기 때문에, 한번 초기세팅도 해보려고 NestJS를 사용했다!

 

 

아래는 ChatGPT가 NestJS 프로젝트를 생성하고,
CORS 문제를 해결하기 위한 프록시 서버를 구성하는 방법을 알려준 내용이다.
아래와 같이 프로젝트를 생성하여 CORS 문제를 해결하였음.

---

NestJS로 간단한 프록시 서버 구축하기 (CORS 문제 해결)

 

1. NestJS 프로젝트 생성

npm i -g @nestjs/cli

CLI가 설치되면, 다음 명령어로 새 NestJS 프로젝트를 생성하고, 해당 프로젝트로 이동합니다(cd proxy-server)

nest new proxy-server

이 명령은 proxy-server라는 이름의 새로운 프로젝트 폴더를 생성하고, 필요한 모든 의존성을 설치합니다. 프로젝트 생성 프로세스에서는 여러 설정을 질문하며, 대부분 기본값으로 진행해도 괜찮습니다.

 

2. HTTP 모듈 설치

NestJS에서 외부 API 요청을 처리하기 위해서는 @nestjs/axios 모듈을 사용할 수 있습니다. 이 모듈을 설치하려면, 생성된 프로젝트 폴더(proxy-server)로 이동한 후 다음 명령어를 실행합니다:

npm install @nestjs/axios

 

3. 프록시 컨트롤러 생성

NestJS 프로젝트에서는 컨트롤러가 특정 경로에 대한 요청을 처리합니다. 외부 API로의 요청을 중계할 컨트롤러를 만들기 위해, 다음 명령어를 실행합니다

nest generate controller proxy​

이 명령은 proxy라는 이름의 컨트롤러를 생성합니다.

 

4. 프록시 로직 구현

생성된 proxy.controller.ts 파일을 열고, 외부 API 요청을 처리하는 로직을 구현합니다. 예를 들어, Coinone API의 특정 엔드포인트로 요청을 전송하고 싶다면, 다음과 같이 작성할 수 있습니다:

import { Controller, Get } from '@nestjs/common';
import { HttpService } from '@nestjs/axios';
import { map } from 'rxjs/operators';

@Controller('proxy')
export class ProxyController {
  constructor(private httpService: HttpService) {}

  @Get()
  fetchRangeUnits() {
    return this.httpService.get('https://api.coinone.co.kr/public/v2/range_units').pipe(
      map(response => response.data)
    );
  }
}

이 코드는 /proxy 경로로 GET 요청이 들어올 때, Coinone의 public/v2/range_units 엔드포인트로 요청을 전송하고, 받은 응답을 클라이언트에게 그대로 반환합니다.

 

5. 서버 실행

모든 설정이 완료되면, 다음 명령어를 사용하여 NestJS 서버를 실행합니다:

npm run start

 

서버가 실행되면, http://localhost:3000/proxy를 통해 프록시 엔드포인트에 접근할 수 있습니다.
이 경로로 요청을 보내면, 서버가 Coinone API로 요청을 전송하고 결과를 반환합니다.

 

6. AppModule 설정

다음은 AppModule에서 HttpModule을 추가하는 방법입니다:

import { Module } from '@nestjs/common';
import { HttpModule } from '@nestjs/axios';
import { ProxyController } from './proxy/proxy.controller';

@Module({
  imports: [HttpModule],
  controllers: [ProxyController],
})
export class AppModule {}

 

7. CORS 설정

프론트엔드에서 NestJS로 구축한 프록시 서버를 호출하기 위해서는 CORS(Cross-Origin Resource Sharing) 설정이 필요합니다. main.ts 파일을 열어 다음과 같이 설정합니다:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors(); // CORS 활성화
  await app.listen(3000);
}

bootstrap();

 

더 보안적인 설정을 원한다면, 특정 출처만 허용하도록 CORS 설정을 조정할 수 있습니다:

app.enableCors({
  origin: 'http://localhost:3000', // 허용할 출처
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // 허용할 HTTP 메소드
  preflightContinue: false,
  optionsSuccessStatus: 204,
});

 

이 설정을 적용한 후 NestJS 서버를 재시작하면, 프론트엔드 애플리케이션에서 http://localhost:3000/proxy로 요청을 보내고 응답을 받을 수 있습니다.

---

 

위와 같이 프록시 서버를 구축하여, 서버에서는 내가 원하는 외부 API로 요청을 보내고,

프론트엔드에서는 내 서버로 요청을 보내면 CORS 에러가 발생하지 않는다!

왜냐하면 CORS 에러는 브라우저에서 발생하는 것이기 때문이다!!

 

ChatGPT 유료버전을 사용하면서, 점점 이 녀석의 해결책이 진화한다는 생각이 든다.

그럴수록 단순한 문제 해결보다는,

문제가 발생한 원인, 문제의 해결 방법들, 그 중 어떤 것을 선택 해야 하는가

에 대한 학습이 필요하다고 생각한다.

 

 

로봇과 공존하는 나날들.

 

여름이었다.