API authorization 401 problem (only JS via browsers) - how to fix?

Question

I need to get (any) OK-response from Yandex SpeechKit.API. I got API-KEY (valid) and successfully used it and received responses via NodeJS and even GitBash (see links to screens below). But browsers show me 401: There're rules for API requests: docs. My JS code for browsers:

let api_key = '*********c_Ujs9scAhJVVZOs2xjnbvevqj6OFFm';
let params = new URLSearchParams();

const text = 'Привет!';
params.append('text', text);
params.append('voice', 'jane');
params.append('emotion', 'good');
params.append('lang', 'ru-RU');
params.append('speed', '1.0');
params.append('format', 'oggopus');

const fetchButton = document.getElementById("fetchButton");

fetchButton.onclick = () => {

  fetch('https://tts.api.cloud.yandex.net/speech/v1/tts:synthesize', {
    method: 'POST',
    body: params,
    mode: "no-cors",
    headers: {
      //'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Api-Key ' + api_key,
    },
  }).then((res) => {
    console.log(res);
  }).catch((err) => {
    console.error(`!!! + ${err} + !!!!!!!!`)
  });

}

There're code examples for Node and Bash:

Answer 1

You said:

mode: "no-cors",            //required

… this means "I am making a cross-origin request, but I am not doing anything that requires the server grant me permission with CORS so instead of throwing errors, fail silently".

You also said:

'Authorization': 'Api-Key ' + api_key,

Setting this header requires permission from CORS. Since you are in no-cors mode it automatically and silently fails to be set.

Since you didn't set the authorisation key, you get a 401 Unauthorised response from the server.

---

You can't use no-cors mode here, even if you have a comment saying it is required.

There is some further reading on CORS you may find useful. Note that since the service you are using requires an API key and imposes limits, it likely isn't intended for use from a browser and you should implement a server-side solution instead.