20250619 SSE 연결하기와 CORS 우회하기

SSE 연결

const connectSSE = () => {
		const eventSource = new EventSource(`/stream?search=${search}&page=${page}`);

		eventSource.addEventListener("message", (e) => {
			const raw: { status: Status; ids: string[] } = JSON.parse(e.data);
			if (raw.status) {
				setSearchStatus(raw.status);
				if (raw.status === "completed") {
					setOpen(true);
				}
			}
			if (raw.ids) {
				setReferenceIds(raw.ids);
			}
		});

		eventSource.onerror = () => {
			const err = new Error("SSE connection error");
			setError(err);
			eventSource.close();
		};

		return () => {
			eventSource.close();
		};
};

나의 경우는 사용자가 enter를 입력했을 때, 서버로 SSE 연결을 시작하기 위해 함수로 선언했지만, 원래는 useEffect 내부에서 관리하는게 좋다고 한다.

vite CORS 에러 우회하기

그런데 그냥 프론트에서 서버로 SSE 연결을 하려고 하니 CORS 에러가 발생했다.
vite 프로젝트에서는 이것을 임시로 우회할 수 있다고 한다.
방법은 vite.config.ts에 server 속성을 추가해주면 된다.

export default defineConfig({
  ...
	server: {
		proxy: {
			"/stream": {
				target: "http://stream 제외한 실제 접근하려는 주소",
				changeOrigin: true,
				secure: false,
			},
		},
	},
})

json 문자열 형식으로 넘어오는 데이터

json 형식으로 넘어오는 데이터
ex. '{"key1": "value1", "key2", "value2"}'
위와 같이 전체 문자열로 넘어오는 경우를 JSON 형식이라 하는데, 이건 JSON.parse()로 쉽게 객체로 변환해 줄 수 있다.
const raw: { key1: string; key2: string } = JSON.parse(e.data);