通过 fetch 函数访问 API 不起作用

Question

我有一个 API 端点，可以从服务器清除缓存。端点需要在 API 调用中传递身份验证令牌。当我尝试通过邮递员请求 API 时，它工作正常。但是当我尝试通过

fetch()

函数调用 API 时，在按钮单击事件上调用，然后出现以下错误。

这是我正在使用的代码

function refresh_clear_cache() {
  console.log("Refresh function");
  var api_url = "https://siteurl/api/refresh";
  var curToken = getCookie("token");
  console.log("Token", curToken);
  var myHeaders = new Headers();
  myHeaders.append("Origin", "*");
  myHeaders.append("cookie", "token=" + curToken);
  var requestOptions = {
    method: "GET",
    mode: "no-cors",
    headers: myHeaders,
    redirect: "follow",
  };
  console.log("requestOptions", requestOptions);
  fetch(api_url, requestOptions)
    .then((r) => {
      r.text().then((content) => {
        console.log("content", content);
      });
    })
    .catch((error) => {
      console.log("Error in fetching: ", error);
    });
}

这里的任何人都可以建议我做错了什么。 非常感谢！

Answer 1

我在您的代码中调整的一些问题是

• 我删除了 'Origin': '*' 标头，因为不需要它。
• 更改了 myHeaders.append('cookie', 'token='+curToken);到 myHeaders.append('Cookie', 'token=' + curToken);因为 Cookie 是正确的标头。
• 从 requestOptions 中删除了模式：“no-cors”。这允许浏览器在请求中包含 cookie。