我知道有很多类似的问题，但我发布这个是因为我觉得它略有不同。
我尝试使用HTTP请求向Slack API发送GET请求，具体来说，代码如下所示。

import useSWR from "swr";

const useSlackSearch = (query: string) => {
  const token = process.env.NEXT_PUBLIC_SLACK_API_USER_TOKEN;
  const myHeaders = new Headers();
  myHeaders.append("Authorization", "Bearer " + token);

  const slackURL = `https://slack.com/api/search.messages?query=${query}`;

  const fetcher = async (url: string) => {
    const response = await fetch(url, {
      headers: myHeaders,
    }).then((res) => res.json());
    return response;
  };

  const { data, error } = useSWR(slackURL, fetcher, {
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
  });

  if (error) {
    return console.log(`Failed to load: ${error}`);
  } else if (!data) {
    return console.log("Loading...");
  } else {
    console.log(data);
    return data;
  }
};

export default useSlackSearch;

我使用的环境如下所示。

• 设备：MacBook Air
• 操作系统：macOS
• 浏览器：Chrome
• 发件人：本地主机：3000
• 收件人：Slack API html页面（https://slack.com/api/search.messages）

在阅读了下面的MDN文章后，我明白了

• MDN定义了一个简单的HTTP请求
• 如果要发送的请求与此简单请求不对应，浏览器将发送一个预检请求
• 在对该印前检查请求的响应中，有一个名为Access-Control-Allow-Headers的标题。
• 只有设置为此Access-Control-Allow-Headers标头值的标头才能在印前检查后用作主请求中的标头。
• 在本例中，我尝试使用Authorization头，但它被上述限制所限制。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
这就是我所理解的全部。然而，在这个方法的官方SlackAPI页面上，它说要在授权头中指定令牌，所以我遇到了麻烦。
我也不明白如何在preflight头文件中指定Access-Control-Request-Headers，正如另一个提问者的帖子中所描述的，原因是在本例中，与Slack API通信的唯一东西是浏览器，唯一相关的源代码是JavaScript（确切地说是React/Next.js）!
之后，我发现Slack API的飞行前响应如下：

access-control-allow-headers: slack-route, x-slack-version-ts, x-b3-traceid, x-b3-spanid, x-b3-parentspanid, x-b3-sampled, x-b3-flags

正如我所想，我理解了授权是不允许的，因为它没有作为一个值包含在内。所以问题是如何解决它。

此外，我后来发现来自浏览器的预检请求正确地声明它希望使用Authorization作为实际的请求头，但是预检响应并不包含该值。