크롬 CORS 에러 -blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`

오랜만에 개발하면서 크롬에서 CORS를 만났다. 처음에 CORS 설정을 다 해줬는데도 에러가 발생하여 원인을 찾는데 시간이 걸렸다. 이번에 발생한 발생한 CORS 에러는 일반적으로 봤던 CORS 에러와 달랐는데 에러 메시지를 끝까지 안본것이 문제였다.

 

먼저 일반적으로 발생하는 CORS 에러는 다음과 같다. 

Access to XMLHttpRequest at 'http://xxxx' from origin 'http://xxxxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이 부분은 백엔드쪽에서 CORS 설정만 해주면 별다른 문제없이 해결이 된다. 

 

하지만 이번에 발생한 CORS 에러는 다음과 같았다

Access to XMLHttpRequest at 'http://10.x.x.x/xxxx' from origin 'http://xxxx.xxx.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`

처음에 에러 메시지는 동일하지만 뒤의 상세 내용이 다르다. 느낌상 네트워크 환경적인 문제일 것 같았다.

프론트에서 백엔드 호출하는 부분인데 프론트는 public 접근가능한 도메인으로 테스트 환경을 구성했고, 백엔드는 번거로워서 was만 띄웠는데 이 was가 private망이라서 문제가 되는 것 같았다. 내 로컬에서는 둘 다의 각각 접속하는 것은 문제가 없지만 크롬에서는 정책적으로 막는 것 같다. 백엔드도 동일하게 public 접근가능한 LB를 연결해주고 LB로 호출하니 문제없이 동작한다.