React 应用程序在通过 safari 访问时会抛出 401 错误，但其他情况下不会答案

【问题标题】：React app throws 401 error when accessed through safari, but not otherwiseReact 应用程序在通过 safari 访问时会抛出 401 错误，但其他情况下不会
【发布时间】：2021-12-18 10:27:40
【问题描述】：

我有一个 React 应用程序托管在云端分发后面的 s3 存储桶中。这与 django 服务器对话。登录在所有浏览器上都能正常工作（确认凭据正确，并且没有基本的连接问题）。登录后，应用程序会重定向到通过 fetch 执行简单 GET 请求的页面（到需要身份验证的 url）。这在桌面（macos）上的所有浏览器上都可以成功运行，除了 safari，它会收到 401 未经授权的错误。同样，我在 iOS 上的每个浏览器上都收到 401 未经授权的错误。

我试过刷新mac的DNS，但无济于事。我完全被难住了。如果它根本不起作用，那很好，但是除了 safari 之外的任何地方都可以工作吗？

获取代码：

  componentDidMount() {
    fetch(`${apiRoot}/info`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Token ${this.props.auth.token}`
      }
    })
      .then(response => response.json())
      .then(data => {
        this.setState({
          Name: data.name,
          Email: data.email
        });
      });
  }

【问题讨论】：

您是否在隐私浏览模式下进行测试，并使用localStorage 处理身份验证密钥？ Safari 在隐私浏览模式下不提供localStorage 对象，许多（可能？）iOS 浏览器，包括 Chrome，只是 Safari 的 UI 包装器。
@MatthewHerbst 我认为您对 iOS 浏览器被包装 safari 的看法是正确的，但我没有使用隐私浏览，而且凭据肯定仍处于状态。
你能给我们看一些代码吗？另外，您正在测试哪个版本的 Safari 和 Mobile Safari？
@MatthewHerbst 我将 fetch 添加到问题中，但它非常基本。 Safari是12.0.2，移动Safari是iOS 12.1.2自带的版本
@Alex 这可能是怎么回事？ stackoverflow.com/questions/50515514/…

标签： reactjs amazon-web-services safari mobile-safari fetch-api

【解决方案1】：

在获取网址的末尾添加正斜杠：

fetch(`${apiRoot}/info/`, ...

Chrome 和 Firefox 似乎可以自行解决此问题，但 Safari 没有。

【讨论】：