음성 합성 (뉴톤톡) Rest API 의 CORS 문제 문의

음성 API
#1

브라우저에서 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

#2

안녕하세요.

카카오 음성 기술에 관심가져 주셔서 감사합니다.

브라우저에서 rest api key를 가지고 직접 카카오 음성 api를 호출하는 것은 key가 사용자에게 그대로 노출되는 위험이 있습니다. 중계 서버를 통해 카카오 음성 api를 호출하는 것을 권해드립니다.

#3

저도 javascript 에서 Rest API 호출하려고 하면 CORS 문제 때문에 못했는데요
위에 카카오 분이 말한 것 처럼 php 서버를 통해서 했습니다.

예를 들어,

$url = ‘https://kakaoi-newtone-openapi.kakao.com/v1/synthesize’;
$data = “
그는 그렇게 말했습니다.
<voice name=“MAN_DIALOG_BRIGHT”>잘 지냈어? 나도 잘 지냈어.
<voice name=“WOMAN_DIALOG_BRIGH” speechStyle=“SS_ALT_FAST_1”>금요일이 좋아요.
”;

$options = array(
‘http’ => array(
‘header’ => “Content-type: application/xml\r\nAuthorization: KakaoAK 나의RestAPI키\r\n”,
‘method’ => ‘POST’,
‘content’ => $data
)
);
$context = stream_context_create($options);

$result = file_get_contents($url, false, $context);

file_put_contents(“파일이름.mp3”, $result);