Directions 5 (CORS 정책 Issue)

[IamNothing]

안녕하세요.

Naver 지도 API 중에 Directions 5 를 사용해 보려하는데, Javascript 에서 Fetch 나 XmlHttp 모두를 써도 모두 CORS 에러가 나네요.
( 물론 Header 에 Client ID 값과 Client Secret 값 모두 넣어서 보냈습니다. )

문서 : https://api.ncloud-docs.com/docs/ai-naver-mapsdirections-driving#요청-예시

호출할 때마다,

"~~~ 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."

가 나오는데요.

 

그냥 Naver Map API 를 쓸 때는 문제가 없고, Response 에도 Access-Control-Allow-Origin 값이 오는 것이 보이는데,

유독 Directions 5 는 Access-Control-Allow-Origin 값이 없어서 CORS 정책에 위배된다고 나오네요..

이상한 것은 postman 을 써 보면 또 되는 것이... 제가 무언가를 놓치고 있는 것 같은데, 몇 시간째 헤매고 있습니다.

선배님들의 조언을 기대해도 될까요?

 

 

 

 

[IamNothing]

2 hours ago, IamNothing said:

안녕하세요.

Naver 지도 API 중에 Directions 5 를 사용해 보려하는데, Javascript 에서 Fetch 나 XmlHttp 모두를 써도 모두 CORS 에러가 나네요.
( 물론 Header 에 Client ID 값과 Client Secret 값 모두 넣어서 보냈습니다. )

문서 : https://api.ncloud-docs.com/docs/ai-naver-mapsdirections-driving#요청-예시

호출할 때마다,

"~~~ 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."

가 나옵니다.

헤더 요청에 Client ID, Client Secret 값이 포함되어 있구요.

정말 기본 소스만 써서 테스트했는데도 안됩니다.

그냥 Naver Map API 를 쓸 때는 문제가 없고, Response 에도 Access-Control-Allow-Origin 값이 오는 것이 보이는데,

유독 Directions 5 는 Access-Control-Allow-Origin 값이 없어서 CORS 정책에 위배된다고 나오네요..

이상한 것은 postman 을 써 보면 또 되는 것이... 제가 무언가를 놓치고 있는 것 같은데, 몇 시간째 헤매고 있습니다.

선배님들의 조언을 기대해도 될까요?

참고로 테스트 소스 코드입니다.
 

    <script>

        let url = "https://naveropenapi.apigw.ntruss.com/map-direction/v1/driving?start=127.1058342,37.359708&goal=129.075986,35.179470&option=trafast";

        let id = "할당받은 ID 값"

        let secret = "할당받은 SECRET 값"

       

 

        let headerOptions = {"X-NCP-APIGW-API-KEY-ID": id, "X-NCP-APIGW-API-KEY": secret};

 

        fetch(url, {method: "GET", headers: headerOptions})

        .then((response) => response.json())

        .then((data) => console.log(data));

    </script>

 

 

 

 

[IamNothing]

22 minutes ago, IamNothing said:

 

 

[IamNothing]

시간을 쓰며 확인해 보니, 헤더 부분에

포스트맨은 대문자로 제대로 가는데, 자바스크립트로 헤더에 추가하니, 모두 첫 글자만 대문자고 중간 중간 소문자로 변환이 되네요. 이게 문제인 듯 한데...

어떻게 방법이 있을까요?