Mixed Content (Next.js)

프로젝트를 하고 배포를 하면서 배포한 사이트에서 백앤드의 데이터가 안들어오는 이슈가 발생했었다.

 

백엔드쪽에서는 제대로 cors 설정을 해두었다고 했다.

configuration.setAllowedOrigins(List.of("http://localhost:3000"));

 

이렇게 개발을 할때만 허용되도록 해두었는데 배포를 하면서

 

configuration.setAllowedOrigins(List.of("http://localhost:3000", "https://gildongmu.vercel.app"));

 

배포 사이트까지 허용을 해주게 되었다.

 

문제의 발생

우선 우리 서버는 http이다.

 

여기서 문제가 발생하게 되었다.

우리가 개발을 하던 로컬호스트는 http라 http인 서버에서 잘 받아오게 되었는데, 배포를 하고서부터는 https에서 http에 통신을 하게 되었다.

 

그런데 콘솔에 

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

라고 나왔다.

이 내용의 뜻은 

'요청을 보내는 웹은 HTTPS로 로드되고 있는데, 요청을 받은 웹은 보안이 취약한 HTTP 프로토콜로 이루어져 있어 막아줬어'

 

보안을 걱정해주는 것은 고맙지만 프론트에서 프로토콜을 만질수도 없고 난감했었다.

 

어떻게 해결해야 할까?

검색을 해보고 '프록시 서버(Proxy Server)'라는 개념을 알게 되었다.

프록시 서버는 서버와 클라이언트 사이에 위치하며 클라이언트 대신 서버와 통신해 응답을 돌려주는 중간에 있는 서버다.

 

CORS 문제, 보안상 이유 등으로 프록시 서버를 사용할 수 있다. 프록시 서버는 서버에 요청을 날릴 때 클라이언트에 관한 그 어떤 데이터도 제공하지 않기 때문이다.

 

Next.js로 만들었기 때문에 Next.js 웹 서버 자체를 프록시 서버로 활용을 한다면 문제를 해결할 수 있을 거라고 알게 되었다. 

찾아보니 밑에 방법으로 프록시 설정을 할 수 있다고 한다.

 

next.config.js

 

module.exports = {
  rewrites: () => [
    {
      source: "/post",
      destination: "http://~~~~",
    },
  ],
};

 

next.config.js에 요청 path와 연결해야 할 URL을 이런 식으로 넣으면 된다.

rewrite() 라는 함수로 넣기 때문에 유동적으로 바꿀 수 있다고 한다.

 

위 설정을 하면 클라이언트는 위에 적은 URL 로 문제였던 http 엔드포인트에 접근할 수 있게 된다.