fetch() 是一种用于在 Web 应用程序中进行网络请求的新 API。它是一种灵活而强大的工具，但可能会遇到一些令人困惑的问题。其中一个问题是 fetch() 默认发送所有 header 键的小写版本，这可能与预期不符。
问题描述
当使用 fetch() 发送一个请求时，可以通过第二个参数传递一个对象，其中包含各种配置选项，例如 method、headers 和 body 等。在这个对象中，header 键通常被视为严格区分大小写的字符串，例如：
-
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ---- ------- --
-然而，实际上，在默认情况下，fetch() 会将所有 header 键都转换为小写字母，并以这种形式发送它们。因此，在上面的示例中，'Content-Type' 实际上会被发送为 'content-type'，这可能导致服务器无法正确解释请求并出现错误。
解决方案
幸运的是，fetch() 提供了一种方式来覆盖默认行为并发送原始大小写的 header 键。为此，您可以使用 Headers 类。这个类允许您显式地设置 header 键和值，并且不会修改它们的大小写。以下是一个示例：
----- ------- - --- ---------- ------------------------------ -------------------- ---------- - ------- ------- -------- -------- ----- ---------------- ---- ------- -- --
使用 Headers 类，您可以明确地指定要发送的 header 键以及它们的大小写。这样就可以避免在服务器端出现大小写敏感性问题。
结论
fetch() 是一种非常强大和灵活的工具，它提供了许多配置选项来控制请求和响应。但是，在使用 fetch() 时，需要注意到默认行为可能会导致错误，并且需要采取额外的步骤来处理大小写敏感性问题。通过使用 Headers 类来显式设置 header 键和值，我们可以更好地控制请求并避免潜在的问题。在实际开发中，我们应该时刻谨记这些细节，并根据需要进行适当的调整。
示例代码
下面是一个完整的示例，演示如何使用 Headers 类覆盖默认的 header 键小写行为：
----- --- - -------------------------- ----- ------- - --- ---------- ------------------------------ -------------------- ---------- - ------- ------- -------- -------- ----- ---------------- ---- ------- -- -- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27514