서울 열린데이터 광장에서 제공하는 OpenAPI인 서울시 실시간 인구데이터를 사용해서 내가 가려는 한강의 실시간 인구 수가 어떻게 되는지 보여주는 프로젝트를 만들게되었다.
개발을 완료하고 Vercel로 배포했는데....
Mixed Content. . .. .. ..너 뭔데 . . .. .. .🤯.. . .. .
💡 Mixed Content란?
MDN 공식문서
웹 페이지가 HTTPS(보안된 연결)를 통해 로드될 때, 페이지에 포함된 일부 리소스(이미지, 스크립트, 스타일시트 등)가 HTTP(보안되지 않은 연결)를 통해 로드되는 상황을 의미
⭐ 즉, https(Vercel 배포)에서 http(OpenAPI)로 요청을 했기 때문에 발생한 오류! ⭐
🌞 해결방법
내가 사용하는 URL은 http://openapi.seoul.go.kr:8088/인증키/json/citydata_ppltn/요청시작위치/요청종료위치/핫스팟장소명 이런식으로 사용해야했다.
1. 서버에서 http가 아닌 https로 변경하기 ❌
서울 열린데이터 광장에서는 http로만 API를 제공해주기 때문에 탈락
2. 프론트에서 프록시 설정하기 ⭕
💡 프록시(Proxy) 란?
보안상의 문제를 방지하기 위해서 직접 통신하지 않고 중계자를 거쳐 통신하는 것이며, 중계자가 프록시(Proxy)이다.
Next.js에서는 rewrites기능으로 프록시를 설정할 수 있음
📄 next.config.js
const nextConfig = {
reactStrictMode: true,
async rewrites() {
return [
{
source: "/api/:path*", //클라이언트가 요청을 하는 URL의 경로
destination: `http://openapi.seoul.go.kr:8088/${process.env.NEXT_PUBLIC_ACCESSKEY}/json/:path*`,
//서버에 실제로 요청되는 URL의 경로
},
];
},
};
module.exports = nextConfig;/:path ⇒ 하나의 경로 세그먼트 ex) /api/user
/:path* ⇒ 하나 이상의 경로 세그먼트 ex) /api/user/profile
📄 axiosConfig.ts
import axios from "axios";
export const API = axios.create({
headers: {
"Content-type": "application/json",
},
baseURL: '/api', // next.config.js에서 작성했던 source 경로와 일치하게 작성
withCredentials: false,
});📄 api.ts
const request = await API.get(`/citydata_ppltn/1/5/${AREA_NM}`);파일을 쪼개놔서 보기 어려운거 같은데 /citydata_ppltn/1/5/${AREA_NM} 이 부분이 /:path*에 들어간다고 보면 될 것 같다!
이렇게 설정하고 다시 배포하면 배포 된 프로젝트에서도 데이터가 너무나도 잘 온다👍🏻
Mixed Content라는 에러도 처음보고 프록시에 관련된걸 하나도 몰랐던 상태에서 해결하려다보니 시간이 더 걸린 것 같다. 해결을 하고 다른 분들 블로그를 다시 읽어보니 정말 똑같이 따라하면 됐던것🙂... 그래도 처음 들어보는 에러도 발견하고 해결까지 하고 완전 럭키비키잔앙~🍀(라고 생각하기)
