Heroku에 배포 후에 아래와 같은 에러가 발생했다. 검색창에 검색어를 입력할 때 API로 데이터를 가져오는데, HTTP, HTTPS 관련해서 문제가 발생한 것 같았다.
🚫
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http://...'. This request has been blocked; the content must be served over HTTPS.
원인
암호화된 HTTPS 페이지에 암호화되지 않은 HTTP를 통해 요청할 때 발생하는 에러다.
참고로 Heroku는 HTTP, API는 HTTPS였다.
해당 경고를 제거하기 위해서는 아래 메타 태그를 추가하면 된다.
해결 방법
Vanilla JavaScript
<head></head> 사이에 아래 코드를 추가한다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />React
public > index.html에서 <head></head> 사이에 아래 코드를 추가한다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />Next.js
pages 폴더에 _document.js 파일을 추가하면 <Head></Head>를 설정할 수 있는데 그 사이에 아래 코드를 추가한다.
<meta
httpEquiv="Content-Security-Policy"
content="upgrade-insecure-requests"
/>
+=