ngrok을 통해 서버요청, 경고메세지 무시

서버와 데이터를 연결하다 보면, 가장 먼저 마주하는 에러는 cors 에러이다.
CORS는 보안 상의 이유로 인해 브라우저에서 실행 중인 웹 애플리케이션이 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근하는 것을 제한하는 정책이다.

따라서, 요청을 보내는 클라이언트에서 CORS 에러를 피하려면 올바른 CORS 헤더를 포함하는 요청을 보내야 합니다. 이를 위해 요청 헤더에 필요한 정보를 추가하여 CORS 정책을 준수해야 합니다. 예를 들어, Access-Control-Allow-Origin 헤더를 설정하여 허용된 출처를 명시할 수 있습니다. 하지만, Access-Control-Allow-Origin 헤더를 설정하였음에도 불구하고 안되는 경우가 있다.

위의 코드에서는 "ngrok-skip-browser-warning": true 헤더를 추가하여 CORS 에러를 피하는 것이 아니라, ngrok을 통해 서버에 요청을 보낼 때 발생하는 브라우저 경고 메시지를 무시하기 위한 목적으로 사용된 것입니다.
headers에   "ngrok-skip-browser-warning": true 를 추가한다!


( 만약 CORS 에러가 발생한다면, 서버 측에서 올바른 CORS 헤더를 설정하도록 구성해야 합니다. )

 

export const dayRender = (userId: number, month: number, date: number) => {
  return axios.get(
    `https://b0f6-2406-5900-1009-4081-20b9-b2c7-1dad-3c7f.ngrok-free.app/consumption/daily/${userId}/${month}/${date}`,
    {
      headers: {
        "ngrok-skip-browser-warning": true,
      },
    }
  );
};