React에서 CustomOverlay를 설정하려고 하면 CORS 에러가 발생합니다

지도/로컬 API
1

안녕하세요.
리액트에서 아래과 같은 코드로 지도 서비스를 제작하고 있습니다.

const Map = (props: Props) => {
	const {positions} = props;
	
	if (window.kakao) {
		// 지도 설정
		const mapContainer = document.getElementById('Map');
		const mapOption = {
			...
		};
		
		// 지도 객체
		map = new kakao.maps.Map(mapContainer, mapOption);
		
                 // 오버레이 생성
		positions.map((items) => {
			const overlay = new kakao.maps.CustomOverlay({
				content: `<div>테스트</div>`,
				map,
				position: marker.getPosition()
			})
		});
	}
	
	return <div id="Map" className={cx('Map')}/>;
};

여기서 overlay.content를 string 타입의 “<div>테스트</div>” 이 아닌, object 타입의 <div>테스트</div> 으로 변경하게 된다면

Error: A cross-origin error was thrown.
React doesn't have access to the actual error object in development.
See https://fb.me/react-crossorigin-error for more information.

위와 같은 오류가 발생하며 CORS 에러가 발생합니다.

코드를 빌드하는 과정에서 발생한 문제인지, 카카오 맵 API의 문제인지 확인해주시면 정말 감사할 것 같습니다 :smile:

2

content에는 String 혹은 HTMLElement를 넣을 수 있습니다.
일단 JSX 문법으로 작성된 Element 같이 보이는 <div>테스트</div> 오브젝트는
컴파일 단계에서 React의 컴포넌트 객체로 변경될 것이므로
DOM Element가 아닙니다.
해당 객체는 API에서 처리할 수 있는 값이 아니므로 부작용이 일어납니다.
일단 에러 메세지가 무엇때문에 발생했는지 무시하더라도
질문의 코드는 제대로 동작하지 않을 겁니다.

크로스 오리진 에러가 왜 발생하는지는
저도 윗 코드만 보고는 감이 오지 않습니다.
development 환경에서 JSX를 실시간 컴파일 하는 과정(watch -> HMR)에서 발생하는
태그 인젝션이 문제를 일으킬 확률이 있어 보입니다.
근거도 불충분하고 조건도 모르는, 어디까지나 소설 수준의 추측이지만…

정확한 원인을 말씀드리기는 어렵네요.

3

답변 감사드립니다.

JSX Element는 Object로 만들어져 있었고, 혹시 몰라 overlay.content를 {foo : “bar”} 형식으로 작성하니 동일한 오류가 발생하는 것을 확인하게 되었습니다.

doji님 말씀대로, Obejct 객체는 API에서 처리할 수 있는 값이 아니기에 API에서 오류가 리턴됨 => 오류를 인식하지 못한 React가 CORS 에러를 일으킴 으로 추정되고 있습니다.

다른 방법으로 string 타입으로 객체를 변환시키니 언제 그랬냐는 듯이 정상적으로 작동하고 있네요. :sweat_smile:

행복한 하루 보내세요. 감사합니다!

1개의 좋아요