SSL 인증서 – Axios 및 React에서 검증 비활성화
리액트 애플리케이션에서 Axios를 사용하여 HTTPS로 자체 서명된 인증서를 사용하여 API를 호출하려고 할 때 net::ERR_INSECURE_RESPONSE 오류가 발생하는 경우, 몇 가지 단계를 수행하여 인증서 검증을 비활성화하고 문제를 해결할 수 있습니다.
오류 설명
이 오류는 브라우저가 기본적으로 신뢰할 수 있는 인증서 기관(CA)에서 발급되지 않은 인증서를 안전하지 않다고 간주하여 자체 서명된 인증서에 대한 요청을 차단하기 때문에 발생합니다.
옵션 1: Axios에서 SSL 검증 비활성화
Axios에서 SSL 검증 비활성화하는 한 가지 방법은 rejectUnauthorized 속성을 false로 설정한 사용자 정의 HTTPS 에이전트를 생성하는 것입니다.
const agent = new https.Agent({
rejectUnauthorized: false,
});
const client = axios.create({
baseURL: process.env.REACT_APP_API_URL,
responseType: 'json',
withCredentials: true,
httpsAgent: agent
});
export default client;이 접근 방식을 사용하면 클라이언트가 SSL 검증을 강제하지 않고 자체 서명된 인증서를 사용하여 API 서버와 통신할 수 있습니다.
옵션 2: Chrome에 인증서 추가
SSL 검증을 유지하면서 자체 서명된 인증서를 사용하려는 경우 인증서를 생성하고 수동으로 Chrome에 추가할 수 있습니다. 이 옵션은 조금 더 고급 구성을 필요로 합니다. Let’s Encrypt 가이드에서 localhost용 인증서 생성 및 설치에 대한 자세한 지침을 제공합니다.
대안적인 접근 방식:
다른 옵션은 사이트를 방문하면서 인증서를 Chrome에 추가하는 것입니다. 이 Stack Overflow 답변에서 Chrome에 인증서를 직접 추가하는 단계를 제공합니다.
결론
이러한 접근 방법 중 하나를 따르면 net::ERR_INSECURE_RESPONSE 오류를 해결하고 리액트 애플리케이션에서 Axios를 사용하여 자체 서명된 인증서를 사용하여 API를 성공적으로 호출할 수 있어야 합니다. 제공된 단계에 대해 추가 질문이나 명확한 설명이 필요한 경우, 아래 댓글에서 질문해 주세요.
