mixed content란?
"혼합 콘텐츠 오류"는 웹 페이지에서 보안 연결(HTTPS)을 통해 제공되는 페이지에 비해 보안되지 않은 연결(HTTP)을 통해 로드되는 콘텐츠가 있는 경우 발생한다. 일반적으로 HTTPS로 보호된 페이지에 HTTP로 로드되는 이미지, 스크립트 또는 스타일 시트와 같은 외부 리소스가 있는 경우에 발생한다.

난 분명 nginx에서 https를 처리하고 있는데 왜 이런일이 발생할까?

원인

원인은 요청은 https로 보내는데 응답이 http로 오기 때문이다.

https로 온 요청을 nginx가 http로 변환한 후에 backend로 보내는 작업은 하고 있지만 http를 다시 https로 변환하는 작업을 하고 있지 않기 때문이다!

해결

nginx 설정을 변경해 주자

server{

		// 기존 코드.. 


		location /api {
			rewrite ^/api(/.*)$ $1 break;
			proxy_pass http://localhost:8000;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme;
	}
}

코드 동작 순서
1. https://example.com/api/someRequest 요청
2. nginx에서 경로를 http://localhost:8000/someRequest 로 변경후 전달
3. proxy_set_header Host $host;: 이 지시문은 프록시 서버로 전달되는 요청 헤더에 Host 헤더를 추가
4. proxy_set_header X-Real-IP $remote_addr;: 이 지시문은 프록시 서버로 전달되는 요청 헤더에 X-Real-IP 헤더를 추가한다. 이 헤더는 원본 클라이언트의 실제 IP 주소를 포함함
5. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;: 이 지시문은 프록시 서버로 전달되는 요청 헤더에 X-Forwarded-For 헤더를 추가한다. 이 헤더는 요청이 어디에서 왔는지를 식별하는 데 사용
6. proxy_set_header X-Forwarded-Proto $scheme;: 이 지시문은 프록시 서버로 전달되는 요청 헤더에 X-Forwarded-Proto 헤더를 추가한다. 이 헤더는 요청이 HTTP인지 HTTPS인지를 나타냄 (이게 제일 중요!!!)

마지막 6번 과정 덕분에 backend는 http로 된 요청을 받지만 nginx가 이를 기억하고 backend가 http로 응답을 생성하여 nginx에게로 전달할때 다시금 http -> https 로 변경한 후 클라이언트에게 전달한다.

이제 mixed Content 에러에서 벗어나자!