Microsoft的文本到语音转换的 CORS 策略问题

Question

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

访问 XMLHttpRequest at "https://westeurope.tts.speech.microsoft.com/"来自原产地 "http://localhost:4200"已被 CORS 策略阻止：对 预检请求未通过访问控制检查：否 "访问控制允许源"标头存在于请求的上 资源。 我自然在 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)
        );
      });

是的，如您所见，当我询问令牌时，Microsoft向我发送了一个错误，但他们在文本错误中向我发送了令牌(我也没有得到它。我尝试了这个解决方案：

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'
    });

但这行不通。我认为问题来自Microsoft但我想确定。

Answer 1

您遇到 CORS 问题：

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

1( 关闭 CORS。例如：如何在铬中关闭 cors

2( 为您的浏览器使用插件

3(使用代理，如nginx。如何设置的示例

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

通过关闭它只是为了完成你的工作(好吧，如果你访问其他网站，只是踢罐子(，你可以使用一个代理，让你的浏览器认为所有请求都来自本地主机，而实际上你有本地服务器，然后调用远程服务器。

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