使用 http get req 从 JS 到 SlackAPI 时，预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权

Question

我知道有很多类似的问题，但我发布这个是因为我觉得它略有不同。

我正在尝试使用 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

这就是我所理解的。然而，在相关方法的官方 Slack API 页面上，它说要在授权标头中指定令牌，所以我遇到了麻烦。

我也不明白如何在预检标头中指定 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 作为实际的请求标头。但是，预检响应不包含该值。

Answer 1

按照CBroe的建议，我能够直接联系Slack帮助中心，所以我问了这个问题。结果我发现，截至 2022 年 2 月底，来自浏览器的 HTTP 请求不受支持。当然，他们已经收到了相当多的相关请求，因此他们希望在某个时候解决这个问题。

这次，浏览器在预检请求中发送了 Access-Control-Request-Headers:Authorization。但 Slack API 服务器端不允许浏览器请求中包含 Authorization 标头。因此，Slack API 端的预检响应中的 Access-Control-Allow-Headers 中未设置授权。

因此，Slack API 端的响应返回了 Invalid Auth，即使在从浏览器发出实际请求时将 Authorization 添加为标头。

通过这个错误，让我对CORS、preflighting等HTTP请求有了更深入的了解，但由于Slack官方网站上没有明确写到，所以就留在这里了。

• 什么是预检：https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
• 什么是 Access-Control-Allow-Header：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
• 什么是 CORS 简单请求：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests