1. 문제 현상

---

• local 환경에서는 서울 공공 api가 정상적으로 호출이 가능한데 배포한 사이트에서는 Mixed content 에러가 발생하면서 api 호출에 실패하고 있었다.

2. 문제 원인

---

• https로 배포된 웹에서 http 프로토콜로 제공되고 있는 서울 공공 api를 호출하고 있어서 Mixed content(https 사이트에서 http 리소스를 로드할 수 없기 때문에 발생하는 문제) 에러가 발생하고 있었다.

3. 문제 해결

---

• next.config.mjs에서 rewrites를 사용해 프록시(Proxy) 설정을 추가하여 http api 요청을 서버 측에서 처리하도록 수정하여 문제를 해결할 수 있었다.

• 여기서 rewrites는 Next.js에서 특정 url 경로로 들어오는 요청을 다른 url 경로로 재매핑한다. rewrites를 사용하면 사용자가 브라우저에 입력한 경로와 실제로 처리되는 경로를 분리할 수 있다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/seoul-toilets/:path*', // 요청 경로
        destination: `http://openAPI.seoul.go.kr:8088/${process.env.NEXT_PUBLIC_SEOUL_OPEN_API_KEY}/json/SearchPublicToiletPOIService/:path*`, // 실제 처리되는 경로
      },
    ];
  },
};

export default nextConfig;

1) 프록시(Proxy)

1-1. 프록시(Proxy)란?

• 클라이언트(ex: 브라우저)와 서버(ex: 서버) 사이에 위치하여, 클라이언트의 요청을 받아 대신 서버에 전달하고, 서버의 응답을 받아 클라이언트에게 전달하는 역할을 하며 아래의 순서대로 동작한다.

1-2. 프록시(Proxy) 동작 순서

1. 클라이언트 요청

• 클라이언트가 https://your-domain.com/api/seoul-toilets/some-path로 api 요청을 보낸다.

2. 프록시 동작

• rewrites 설정에 의해, 클라이언트가 /api/seoul-toilets/:path* 경로로 보내는 요청은 프록시가 받아 처리하게 된다.

• 이 프록시는 클라이언트의 요청을 다음과 같이 변경한다.

  • 원래 클라이언트가 보낸 요청은 https://your-domain.com/api/seoul-toilets/some-path이지만 프록시가 요청을 받아, 이를 내부적으로 http://openAPI.seoul.go.kr:8088/${process.env.NEXT_PUBLIC_SEOUL_OPEN_API_KEY}/json/SearchPublicToiletPOIService/some-path로 변경하여 실제 서버로 전달하게 된다.

3. 서버 응답

• 서울 공공 api 서버(http://openAPI.seoul.go.kr:8088)는 요청을 처리하고, json 데이터를 프록시 서버에 응답으로 보낸다. 그리고 Next.js 서버(프록시)는 이 응답을 클라이언트에게 그대로 전달한다.

참고

• 혼합 콘텐츠(Mixed content, MDN)
• rewrites(Next.js Docs)
• Next.js에서 Mixed Content 에러 해결하기 (feat. Proxy)
• [NextJS] NextJS에서의 proxy설정