카카오 모빌리티 길찾기 api CORS 문제

카카오내비
#1

카카오 모빌리티의 길찾기 api를 이용하고 싶은데

Access to fetch at ‘https://apis-navi.kakaomobility.com/v1/directions?origin=126.948888732395,37.4888274185933&destination=126.978652258823,37.56682420267543’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

이런 오류가 나면서

Creating?area=Seoul:1300 GET https://apis-navi.kakaomobility.com/v1/directions?origin=126.948888732395,37.4888274185933&destination=126.978652258823,37.56682420267543 net::ERR_FAILED

이렇게 로그가 출력됩니다

코드는

		var urlV1 = "https://apis-navi.kakaomobility.com/v1/directions"
			var origin = X + "," + Y;
		var destination = $("#lng").val() + "," + $("#lat").val();
		
		// API 엔드포인트 URL
		const apiUrl = urlV1  + "?origin=" + origin + "&destination=" + destination;

		console.log(apiUrl)
		
		// fetch를 사용하여 API 요청 보내기
		fetch(apiUrl, {
		  method: 'GET',
		  headers: {
		    'Authorizatin' : 'KakaoAK ' + apiKey,
		    Accept : 'application/json'
		  }
		})
		  .then(response => {
		    // HTTP 응답 상태 확인
		    if (!response.ok) {
		      throw new Error('네트워크 오류: ' + response.status);
		    }
		    // JSON 데이터 파싱
		    return response.json();
		  })
		  .then(data => {
		    // API 응답 데이터 처리
		    console.log('API 응답 데이터:', data);
		    	    
		    // 여기에서 원하는 처리를 수행할 수 있습니다.
		  })
		  .catch(error => {
		    // 오류 처리
		    console.error('API 요청 오류:', error);
		  });

이렇게 됩니다.

앱 아이디는 967260입니다