CORS POLICY problem with Text To Speech of Microsoft

Question

When I tried to contact the text to speech of Microsoft, I received this error:

Access to XMLHttpRequest at 'https://westeurope.tts.speech.microsoft.com/' from origin 'http://localhost:4200' 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. I'm naturally in Angular and my code is like that:

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

Yes, as you can see, Microsoft sent to me an error when I ask a Token but they send me the token inside text error(I don't get it too.) I tried this solution:

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

But that's not working. I think the problem is coming from Microsoft but I want to be sure.

have you added CORS extension into your chrome browser? – AddWeb Solution Pvt Ltd Mar 27 '19 at 11:29 — AddWeb Solution Pvt Ltd, Mar 27 '19 at 11:29
Yeah I did that too but not working :/ – thelittlewozniak Mar 27 '19 at 11:43 — thelittlewozniak, Mar 27 '19 at 11:43

score 0 · Answer 1 · answered Apr 30 '19 at 10:25

You are having CORS issues:

There are several ways to fix this issue

1) Turn off CORS. For example: how to turn off cors in chrome

2) Use a plugin for your browser

3) Use a proxy such as nginx. example of how to set up

More verbosely, you are trying to access api.serverurl.com from localhost. This is the exact definition of cross domain request.

By either turning it off just to get your work done (OK, put poor security for you if you visit other sites and just kicks the can down the road) you can use a proxy which makes your browser think all requests come from local host when really you have local server that then calls the remote server.

so api.serverurl.com might become localhost:8000/api and your local nginx or other proxy will send to the correct destination.

CORS POLICY problem with Text To Speech of Microsoft

1 Answers1