[LAB-2] meta태그를 추가해도 같은 공공 api를 불러오지 못합니다

[leejh4197]

질문 작성자

이주형

문제 상황

이전 #263 답변에 설명해주신대로 meta를 적용시켜 재배포 시켜보았으나,

데이터를 요청하지 못하는 것으로 오류가 나오고 있습니다. 제 생각으로는 meta태그를 추가함으로써 https로 get 요청을 하는 것 같은데 사진의 주소처럼 https주소로 요청을하면 http가 아니어서 데이터 자체를 불러오지 못하는 것 같습니다..

프로젝트 저장소 URL

-https://github.com/kindergarten-udon/udon-house/tree/develop

환경 정보

• 운영체제 정보 macOS
• Node.js 정보 v18.12.1

[yamoo9]

Mixed Content 이슈

React 개발 과정에서는 http 프로토콜 사용으로 http를 사용하는 Open API 요청 이슈가 없었지만,
Netlify에 배포하면서 웹 서비스가 https 프로토콜을 사용함에 따라 http를 사용하는 Open API 요청이 차단된 것입니다.

문제 원인은 HTTP만 지원하는 공공 API

아쉽게도 사용된 공공 API가 시대에 안맞게 HTTP만 지원하고 있어 애플리케이션에서 보내는
모든 HTTP 요청을 HTTPS 요청으로 바꿔 전송하도록 하는 메타 태그도 소용이 없습니다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

⚠️ 결과적으로 프론트엔드 단에서 딱히 해결할 수 있는 방법이 없습니다.

결국, 이 문제 해결 방법은 아래 나열된 것들 중 하나일 것입니다. 😩

1. 공공 API 측에 HTTPS 서비스도 지원하도록 요청한다.
2. 백엔드 서버 환경을 구성한 후, 공공 API에서 HTTP로 받아온 정보를 다시 클라이언트 측에 HTTPS로 전송한다.
3. HTTPS가 아닌, HTTP 프로토콜로 웹 서비스를 배포한다. (1, 2 방법을 사용할 수 없는 경우)

참고

• [프론트엔드] - Mixed Content 이슈를 해결하며
• http 요청시 Mixed Content 에러

Netlify 프록시 활용

추가적으로 Netlify 문서 Redirects and rewrites 내용을 검토해
HTTP 요청을 우회(Proxy)하는 방법을 사용해 볼 수 있을 것 같습니다. (유사한 문제 해결 사례 참고)

Netlify 프록시를 사용해 API를 제공하는 방법은 아래 영상 튜토리얼을 참고해보세요. 🙂

• How to create a serveless express app in netlify
• API Hosting! Easy Serverless APIs with Netlify Functions & JavaScript!
• Making JS API Calls Masterclass (Axios, Fetch, CORS, Netlify Functions, Proxies)