Just Do IT!
[Error] Mixed Content 에러 해결 본문
728x90
반응형
TIL에도 언급했듯이 vercel로 프로젝트를 배포했더니, api가 받아와지 않고 아래와 같은 에러가 발생했다.
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를 통해 요청할 때 발생하는 에러
- https 사이트에서 ajax를 사용해서 비동기로 http 사이트에 request를 요청해서 문제가 발생
이러한 원인 때문에 Mixed Content 에러가 발생한 것이고 이걸 해결하는 방법은 매우 간단했다.
해결 방법
html 파일의 <head> 태그 안에 아래 코드를 추가하면 오류가 해결된다.
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">이걸 추가하고 다시 push 후 배포된 사이트에서 적용되기를 기다렸더니 제대로 작동 완료.
stackoverflow 에도 동일한 질문이 남겨져 있어서 함께 첨부한다.
How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"
This URL: https://slowapi.com I can't find the insecure content and the Chrome keeps complaining, Any ideas?
stackoverflow.com
추후에 같은 에러가 발생하면 다시 이 글로 돌아와야지.
728x90
'개발 공부 > Error' 카테고리의 다른 글
| React Hook useEffect has a missing dependency 해결 (0) | 2023.06.10 |
|---|---|
| npm ERR! Cannot read properties of null (reading 'edgesOut') (0) | 2023.06.06 |
| [Error] 새로고침 이후 로그인/로그아웃 토글이 되지 않을 때 (0) | 2023.02.09 |
| [Error] useNavigate() may be used only in the context of a <router> component. (0) | 2023.02.09 |
| [Error] Network Response Time Out (React Native) (0) | 2022.12.29 |
'개발 공부/Error' Related Articles
more
