로컬 개발 환경에서 CORS 프록시 사용을 위한 코드 개선

[PhysicksKim]

클라이언트 앱에서 본 비공식 API 사용 시, 개발 단계에서 로컬 프록시를 이용할 수 있도록
ChzzkClient 객체 생성 시점에 API 주소를 주입 받을 수 있게 개선하면 좋을 것 같습니다.

예를 들어 http-proxy-middleware 라이브러리를 사용하면 별도의 node 서버를 세팅하지 않고도 로컬 프록시 구조를 만들 수 있습니다.

아래와 같은 프록시 구조를 만들기 위해서는
client --> /api --> 프록시서버 --> https://api.chzzk.naver.com

이와 같은 코드를 작성하면 됩니다.

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "https://api.chzzk.naver.com",
      changeOrigin: true,
      pathRewrite: { "^/api": "" },
    })
  );
};

위 프록시 세팅 코드는
fetch("/api") 요청을 프록시 서버가 받아들이고
프록시 서버가 다시 /api 요청을 그대로 https://api.chzzk.naver.com 로 보내서 응답을 반환하도록 하는 세팅입니다.

하지만 위와 같은 로컬 프록시 라이브러리가 동작하도록 하려면
ChzzkClient 가 로컬 프록시 주소를 주입받을 수 있도록 코드를 변경해야 합니다.
현재는 ChzzkClient 가 고정적으로 consts.ts로 부터 네이버측 api 주소를 받아서 fetch 하고 있습니다.
대신 ChzzkClient 가 생성 시점이나 세팅 메서드를 통해서 프록시 주소 /api를 받아서 fetch 할 수 있도록 개선하면 좋을 것 같습니다.

[kimcore]

좋은 제안 감사합니다! 1.1.0 버전에 해당 기능을 추가하였습니다.

const options = {
    baseUrls: {
        chzzkBaseUrl: "https://api.chzzk.naver.com",
        gameBaseUrl: "https://comm-api.game.naver.com/nng_main"
    }
}

const client = new ChzzkClient(options)

[WisdomIT]

본 기능 관련하여 문의드립니다.

nextjs에서 next.config.js에 rewrites를 통해 다음과 같이 프록시를 구성하고,

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true
  },
  async rewrites() {
    return [
      {
        source: "/api/proxy/chzzkBase/:path*",
        destination: "https://api.chzzk.naver.com/:path*"
      },
      {
        source: "/api/proxy/gameBase/:path*",
        destination: "https://comm-api.game.naver.com/nng_main/:path*"
      }
    ]
  }
}

module.exports = nextConfig

Chzzk API를 다음과 같이 선언해서 클라이언트를 사용하려 하고 있습니다.

const client = new ChzzkChat({
      channelId: channelId,
      baseUrls: {
        chzzkBaseUrl: "/api/proxy/chzzkBase",
        gameBaseUrl: "/api/proxy/gameBase",
      }
    })

이렇게 세팅했을 때 live-status는 정상적으로 받아오는 모습을 확인했는데요, access-token 요청 url이 이상하게 chzzkBaseUrl + gameBaseUrl 의 형태로 들어갑니다.

gameBaseUrl 설정을 제외하고 요청을 넣으면 요청 url이 https://localhost:3002/streamer/undefined/v1/chats/access-token?channelId=N16LZT&chatType=STREAMING 이 됩니다.

확인해주시면 감사드리겠습니다.

++ 내용 추가합니다. baseUrls를 https://를 포함한 전체 URL로 입력하니 문제가 없습니다!

[kimcore]

@WisdomIT gameBaseUrl 이 / 로 시작할 경우 chzzkBaseUrl 이 앞에 추가되는 버그로 확인되어 수정하였습니다. 1.6.1 버전으로 업데이트 하시면 해결됩니다. 제보 감사합니다!