当使用从 JS 到 SlackAPI 的 http get req 时，Access-Control-Allow-Headers 不允许请求 header 字段授权

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
• OS: macOS
• 浏览器：Chrome
• 发件人：localhost:3000
• 收件人：Slack API html 页面 (https://slack.com/api/search.messages)

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

• MDN 定义了一个简单的 HTTP 请求
• 如果你要发送的请求与这个简单的请求不对应，浏览器会发送一个预检请求
• 在对该预检请求的响应中，有一个名为 Access-Control-Allow-Headers 的 header。
• 只有header设置为这个Access-Control-Allow-Headers的值header可以在预检后作为主请求中的header
• 在这种情况下，我尝试使用授权header，但被上述限制所困。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

我只知道这些。 但是，在相关方法的官方 Slack API 页面上，它说要在授权 header 中指定令牌，所以我遇到了麻烦。

我也不明白如何在预检 header 中指定 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

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

---

此外，我后来发现来自浏览器的预检请求正确声明它想使用授权作为实际请求header。但是，预检响应不包含该值。

Answer 1

按照CBroe的建议，我可以直接联系到Slack帮助中心，所以我问了这个问题。 结果我发现，到2022年2月底，浏览器的HTTP请求是不支持的。当然，他们收到了很多关于这个的请求，所以他们希望在某个时候解决它。

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

因此，来自 Slack API 端的响应返回了无效的 Auth，即使在从浏览器发出实际请求时将授权添加为 header。

通过这个错误，让我对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