📆 23.01.15 - Mixed Content

netlify CI / CD 자동화 과정에서 오류 127번이라는 친구를 만나서 어려움을 겪던 찰나에 npm run build 하여 만든 빌드 폴더를 직접 배포하여 서비스를 배포하는데 성공을 하였다.

그러나 axios 요청을 하는데 response 값이 호출이 잘되지 않는 문제를 발견하게 되었다. 에러 내용은 위의 사진과 같은데, 하단의 This request has been blocked 라는 말만 보았을 때 약간 CORS 에러와 비슷하여 CORS 문제로 착각을 할 수도 있었다.

Mixed Content

결론적으로 이 에러는 https 환경으로 배포된 사이트가 http 서버의 api 에 접근하여 데이터를 요구하였을 때 발생하는 에러라고 한다.

해당 api 주소를 http 에서 https 로 변경하여 부르게되면 문제는 없다만, 만약 http 주소로 요청을 해야될 시에, 어떻게해야 하느냐..

이 서비스는 자동화를 하지 않고 build 명령어로 만든 빌드 파일을 직접 첨부하여 배포한 사이트이기 때문에 index.html을 건들여서 수정 후 배포하면 해결이 된다.

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

meta 태그를 넣는 부분에 위의 코드를 기입을 하면 https 환경에서도 http api call 을 할 수 있게된다.