[react] Mixed Content: The page at 'https://...' was loaded over HTTPS, but ... 오류 해결하기

😵‍💫 vercel로 배포 후, 오류 발생

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.

localhost에서는 에러가 안 뜨고 잘만 나왔는데 배포하고 나서 살펴보니 에러가 떴다..

👉 에러 발생 이유는?

위와 같은 에러는 암호화된 HTTPS 페이지에 암호화가 안 된 HTTP를 사용해 요청했을때 발생한다. 생각해보니 내가 iframe 태그를 사용한다고 새로운 src 주소를 받아와서 그랬다는 걸 깨달았다... 멍청이

👉 해결하자

이 부분을 head 태그 안에 넣어주면 된다!

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

따라서 나는 React를 사용하고 있기 때문에 index.html의 head태그에 추가해주었다.

보안에 더 신경쓰자...🫡