카페24 웹호스팅 중 cors에러 관련 질문입니다.

Question

정부 지원사업으로 3개월짜리 인턴십 진행중인 신입개발자 입니다.

현재 회사에는 시니어 개발자나 선임 개발자가 없어서 정말

초짜 백엔드 1명, 프론트 1명이서 프로젝트르 진행중입니다.

node.js - react로 구현한 웹페이지를 카페24 웹호스팅을 통해 배포중입니다.
(호스팅 : node.js 호스팅 일반형 / 도메인: htcoummunity.cafe24app.com)

배포된 웹페이지를 테스트 도중 cors에러를 만났습니다.

상황=
 로그인 버튼을 누르면 로그인 정보를 체크하는 API가 cors에러로 인해 응답을 받아오지 못하고 있습니다.(모든 api가 안됩니다.)

에러메세지=
Access to fetch at http://localhost:8001/api/signup/checkuser from origin http://htcoummunity.cafe24app.com has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

POST http://localhost:8001/api/signup/loginEmail net::ERR_FAILED

자체적인 분석으로는 
http://htcoummunity.cafe24app.com 가 public IP이기 때문에 로컬호스트로 요청하는 api는 리소스의 Private 수준이 더 높기때문에 cors정책에 의해 막힌 것이라고 해석했습니다. 하지만 적절한 해결책은 찾지 못하고 있습니다.

Proxy설정까지는 시도해봤지만 문제가 해결되지는 않았습니다.

인턴십이 이제 3일정도 남아서 배포만이라도 깔끔하게 마무리하고 싶은데 해결이 되지 않고 있습니다. 
부디 해결책을 제시해주시면 감사하겠습니다!

류호준 · Accepted Answer

CORS 에러는 api가 처리하려는 요청이 허용되지 않은 도메인에서 유래했기때문에 나타는 에러입니다. 이 경우에 요청이 localhost에서 발생했고 처리하는 api의 도메인이 서로 다르기때문에 그렇습니다. Api쪽에서 post요청을 모든 도메인에서 허용하도록 변경하거나 localhost를 더하는 방식 혹은 지금 알아보고계신 proxy방식으로 post요청을 브라우져가 아닌 node가 있는 서버에서 처리하는 방식등으로 해결할 수 있습니다 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers