작업 상태
- SSR 작업 중 https로 데이터를 얻어오는 일이 있어서 axios쪽에 https 인증 무시를 설정한 후 브라우저에서 계속 보였습니다.
에러 메시지
Uncaught TypeError: https.Agent is not a constructor
이미지를 설명하는중@.@
const agent = new https.Agent({ //<-- 에러 발생 부분
rejectUnauthorized: false
});
//서버와 통신하다: communicate with the server
const cwts = axios.create({
baseURL: `${apiUrl}/api`,
timeout: 5000,
httpsAgent: agent,
headers: {
'Content-Type': 'application/json',
},
});
- 코드는 특별히 문제가 없었습니다.
- https.Agent는 HTTP(S) 연결을 관리하고 재사용하는 HTTP(S) 에이전트 객체의 인스턴스를 생성하는 생성자 함수입니다. 일반적으로 Node.js에서 HTTPS 서버에 요청을 보낼 때 사용됩니다.
원인
- 원인은 이 부분의 코드가 문제가 아니었습니다.
- 상단 코드가 server용, client용 공용 util으로 사용되는 부분이어서 문제가 되는것이었습니다.
- 변환, 배포후 server용은 node에서 동작 client용은 브라우저에서 동작하게 되는 부분입니다.
- 이 부분에서 https.Agent가 브라우저에서 동작하면서 발생하는 문제였습니다.
처리
- 개발환경이 vite, react tsx,ssr 작업 중이어서 vite환경변수를 이용해서 설정을 분리했습니다.
const ssr :boolean = import.meta.env.SSR;
let configx = {
baseURL: `${apiUrl}/api`,
timeout: 1000*10,
// httpsAgent: agent,
headers: {
'Content-Type': 'application/json',
},
}
if( ssr ){//is server
const agent = new https.Agent({
rejectUnauthorized: false
});
configx = Object.assign({}, configx, { httpsAgent: agent });
}
const cwts = axios.create(configx);
클라이언트 측 변환코드
let configx = {
baseURL: `${apiUrl}/api`,
timeout: 1e3 * 10,
// httpsAgent: agent,
headers: {
"Content-Type": "application/json"
}
};
const cwts$1 = axios$1.create(configx);
서버측 변환코드
let configx = {
baseURL: `${apiUrl}/api`,
timeout: 1e3 * 10,
// httpsAgent: agent,
headers: {
"Content-Type": "application/json"
}
};
{
const agent = new https.Agent({
rejectUnauthorized: false
});
configx = Object.assign({}, configx, { httpsAgent: agent });
}
const cwts$1 = axios.create(configx);
참고
시작하기 | Vite (vitejs-kr.github.io) vite
