使用 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
• 来自：localhost: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/文档/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

Answer 2

在请求正文中使用 token 而不是 Authorization 标头对我有用。

axios({
  method: 'post',
  url: 'https://slack.com/api/chat.postMessage',
  data: `text=Hi&channel=D048GGYTJUK&token=${process.env.TOKEN}`
})

Answer 3

我也无法让授权标头正常工作。但是，Slack 提供了 此示例用于在弃用查询参数方法后向 Post 正文添加令牌身份验证。
这对我来说很有效，可以从浏览器对 Slack 进行 Web API 调用（用于测试），以便 Slack 读取令牌进行身份验证。请注意，根据 Slack 的 最佳实践为了安全，用户和机器人令牌应小心存储，不要在客户端 Javascript 中使用：

    try {
      const res = await fetch("https://slack.com/api/conversations.list", {
        method: "POST",
        body: `token=${TOKEN}`, // body data type must match "Content-Type" header
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }).catch((error) => {
        console.log(error);
      });
      if (!res.ok) {
        throw new Error(`Server error ${res.status}`);
      } else {
        const data = await res.json();
        console.log(data);
      }
    } catch (error) {
      console.log(error);
    }