문제 발생
리액트로 SSE 구현 중에 엑세스 토큰을 header에 담아서 보내야하는데, EventSource에서 headers를 넣을 수 없다는 오류가 발생했다.
'EventSourceInit'형식에 'headers'이(가) 없습니다.
원인 해결
EventSourcePolyfill 라이브러리를 이용해서 header 부분에 담을 수 있게 설정을 해주었다. 사용 방법은 아래와같다.
const EventSource = EventSourcePolyfill || NativeEventSource;
최종
const EventSource = EventSourcePolyfill || NativeEventSource;
useEffect(() => {
if (!isLoading && getToken) {
const fetchSse = async () => {
try {
const sse = new EventSource(
`URL`,
{
hearders:{
//headers에 들어가는 부분
},
withCredentials: true,
},
);
sse.onmessage = async (e) => {
console.log('데이터입니다', e);
};
sse.onerror = async (e) => {
console.log('에러입니다', e);
sse.close();
};
} catch (error) {}
};
fetchSse();
}
}, []);
참고
'트러블 슈팅' 카테고리의 다른 글
route의 path가 mis matching일때, 404 에러 화면으로 이동하기 (0) | 2024.06.18 |
---|---|
현재 프로젝트에서 브랜치 전략 개선해보기 (0) | 2023.10.17 |
GitHub Flow와 Git Flow 중에 어떤 걸 선택해야하지? (0) | 2023.10.17 |
[html/css]글자수 넘어가면 말줄임표/원하는 줄 수에 맞게 말줄임표 (0) | 2023.09.08 |