javascript - API 授权 401 问题（仅通过浏览器的 JS） - 如何解决？

Question

我需要从 Yandex SpeechKit.API 获得（任何）OK 响应。我获得了 API-KEY（有效）并成功使用它，并通过 NodeJS 甚至 GitBash 收到了响应（请参阅下面的屏幕链接）。但是浏览器向我显示 401： API 请求有规则：docs。我的浏览器 JS 代码：

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} + !!!!!!!!`)
  });

}

有 Node 和 Bash 的代码示例：

Answer 1

你说：

mode: "no-cors",            //required

...这意味着“我正在发出跨域请求，但我没有做任何需要服务器授予我 CORS 权限的事情，所以不要抛出错误，而是静默失败”。

你还说：

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

设置此标头需要 CORS 的许可。由于您处于 no-cors 模式，因此无法自动且静默地设置它。

由于您没有设置授权密钥，因此您会从服务器收到401 Unauthorized响应。

---

你不能在这里使用 no-cors 模式，即使你有评论说它是必需的。

有一些关于 CORS 的进一步阅读，您可能会觉得有用。请注意，由于您使用的服务需要 API 密钥并施加限制，因此它可能不适合在浏览器中使用，您应该实施服务器端解决方案。