브라우저에서 ajax로 음성인식 Rest API를 호출하려고 합니다.
호출 대상 API는 음성 합성 (뉴톤톡) 입니다.
curl 로는 샘플의 정상동작을 확인했습니다.
제가 하고 싶은것은 브라우저에서 ajax로 해당 서비스를 호출하는 걸 테스트 하고 있는 중입니다.
기본적인 코드는 아래와 같습니다. (jquery를 사용했으나 동일한 문제가 있어서 기본 API로만 구현했습니다.)
var d = ‘’ +
‘그는 그렇게 말했습니다.’ +
‘잘 지냈어? 나도 잘 지냈어.’ +
‘금요일이 좋아요.’ +
’’;
console.log(d);
var req = new XMLHttpRequest();
req.open(‘POST’, “https://kakaoi-newtone-openapi.kakao.com/v1/synthesize”, false);
req.setRequestHeader(“Authorization”, “KakaoAK d369~~~”);
req.setRequestHeader(“Content-Type”, “application/xml”);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
console.log("Status: ", req.status);
console.log("Response message: ", req.responseText);
}
};
req.send(d);
브라우저에서 AJAX로 다른 사이트 call을 했으니 CORS 문제가 생기고
POST이지만 Content type이 application/xml 을 사용함으로 Preflight 조건이 됩니다.
그런데 예비호출로 OPTIONS Method 호출할때 아래와 같은 에러가 발생합니다.
VM1491:1 OPTIONS https://kakaoi-newtone-openapi.kakao.com/v1/synthesize 400 (Bad Request)
예비호출이 정상적으로 되지 않았으니 실제 호출이 CORS로 block 당했다는 메시지가 이후에 나옵니다.
VM1491:1 Access to XMLHttpRequest at ‘https://kakaoi-newtone-openapi.kakao.com/v1/synthesize’ from origin ‘http://127.0.0.1’ 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.
테스트 브라우저는 Chrom73.0.3683.103(공식 빌드) (64비트) 입니다.
제가 잘못한 것이 있을까요? 확인 부탁드리겠습니다.
감사합니다.
참고로 Chrome Browser의 Network Tab > Header 정보입니다.
-
General
Request URL: https://kakaoi-newtone-openapi.kakao.com/v1/synthesize
Request Method: OPTIONS
Status Code: 400 Bad Request
Remote Address: 121.53.202.215:443
Referrer Policy: no-referrer-when-downgrade -
Request Headers
Provisional headers are shown
Access-Control-Request-Headers: access-control-allow-origin,authorization,content-type
Access-Control-Request-Method: POST
Origin: http://127.0.0.1
Referer: http://127.0.0.1/resources/tts.html
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36