짜증나는 CORS(Cross Origin Resource Sharing) 오류

프론트엔드 개발자도 아니지만 웹서비스 관련 코드를 조금 만져야하는 위치에 있는지라 얇은 지식으로 근근히 버티고 있다.

지난번에 브라우저 관련해서 코드를 수정하다가 CORS 이슈를 알게되었고 구글링으로 어찌어찌 고쳤다.

그런데 요근래에 오류관련 전화를 받아서 찾아보니 또 CORS 오류...

 

그래서 해결책을 찾는김에 여기에 해당 내용을 적는다.

 

브라우저 개발자모드에서 보면 콘솔이 이렇게 찍힌다.

has been blocked by CORS policy: The request client is not a 
secure context and the resource is in more-private address space `local`.

해결방법

 

1.     웹사이트를 HTTPS로 전환하면 정상동작합니다.

2.     주소 입력창에 다음과 같이 입력합니다.

        - chrome://flags/#block-insecure-private-network-requests

        - edge://flags/#block-insecure-private-network-requests 

           Block insecure private network requests 항목의 설정값을 Disabled로 설정 합니다.

3.     "Chrome Origin Trials" 사용

           개발자 지원 기능을 이용하여 로컬 네트워크 접근을 허용할 수 있습니다.

           1) https://developer.chrome.com/origintrials/#/trials/active 로 접속

           2) Private Network Access from non-secure contexts 항목의 REGISTER 클릭

 

1번이 근본적인 해결방법

2번, 3번은 임시방편.

특히 3번은 등록을 하면 API키를 제공하고 사용할 수 있는 기간이 정해짐.

 

고치는게 문제가 아니라 얇은 지식으로 막연한 두려움이 있어 1번을 못하겠다..연관되어 있는 것들이 많아서..

이래서 서버나 프로그램도 초기 아키텍쳐 설계가 중요하다...