微软文本语音的CORS政策问题

Question

当我尝试联系Microsoft的文本到语音时，我收到此错误：

从'https://westeurope.tts.speech.microsoft.com/'访问'http://localhost:4200'的XMLHttpRequest已被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上没有'Access-Control-Allow-Origin'标头。我自然是在Angular中，我的代码是这样的：

this.http.post<any>('https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issueToken', null, {headers: new HttpHeaders({'Ocp-Apim-Subscription-Key': '3e17428195894a8f9de3e76ee431ff80'})}).subscribe(
      () => {},
      (err) => {
        console.log(err.error.text);
        let body = '<speak version=\'1.0\' xmlns="https://www.w3.org/2001/10/synthesis" xml:lang=\'en-US\'><voice  name=\'Microsoft Server Speech Text to Speech Voice (en-US, Jessa24kRUS)\'>Welcome to Microsoft Cognitive Services <break time="100ms" /> Text-to-Speech API.</voice> </speak>';
        let headersSpeech = new HttpHeaders({
          'Authorization': 'Bearer ' + err.error.text,
          'cache-control': 'no-cache',
          'X-Microsoft-OutputFormat': 'riff-24khz-16bit-mono-pcm',
          'Content-Type': 'application/ssml+xml'
        });
        this.http.post<any>('https://westeurope.tts.speech.microsoft.com/', body, {headers: headersSpeech}).subscribe(
          (resultData) => console.log(resultData)
        );
      });

是的，正如你所看到的，当我问一个令牌时，微软向我发送了一个错误，但是他们在文本错误中向我发送了令牌（我也没有得到它。）我尝试了这个解决方案：

let headersSpeech = new HttpHeaders({
      'Access-Control-Allow-Origin': 'http://localhost:4200/',
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
      'Access-Control-Allow-Headers': '*',
      'Authorization': 'Bearer ' + err.error.text,
      'cache-control': 'no-cache',
      'X-Microsoft-OutputFormat': 'riff-24khz-16bit-mono-pcm',
      'Content-Type': 'application/ssml+xml'
    });

但那不起作用。我认为问题来自微软，但我想确定。

Answer 1

您有CORS问题：

有几种方法可以解决此问题

1）关闭CORS。例如：how to turn off cors in chrome

2）为你的browser使用插件

3）使用代理，如nginx。 example of how to set up

更详细地说，您正试图从localhost访问api.serverurl.com。这是跨域请求的确切定义。

通过关闭它只是为了让你的工作完成（好吧，如果你访问其他网站并给你带来不好的安全性，你可以使用代理，这会让你的浏览器认为所有请求都来自本地主机）你真的有本地服务器然后调用远程服务器。

所以api.serverurl.com可能会成为localhost：8000 / api，您的本地nginx或其他代理将发送到正确的目的地。