在 Safari 中使用身份验证令牌的 Axios 请求有时会失败

Question

我正在开发一个使用 axios (0.19.0) 的 React (16.9.0) 单页应用程序。 axios 请求使用令牌身份验证来访问运行 django-rest-framework (3.6.4) 和 django-cors-headers (3.1.1) 的服务器。身份验证令牌是在登录期间由 django-rest-auth (0.9.5) 生成的。

该应用程序在 Chrome 和 Firefox 中可靠运行。在 Safari 中，某些请求会因 401 错误而失败。

此请求在所有三个浏览器中均成功：

INFO basehttp: "GET /apis/games/?slug=pop HTTP/1.1" 200 60932```

生成它的代码如下所示：

    axios
      .get(`${simplUrl}/apis/games/?slug=${gameSlug}`, {
        headers: { Authorization: simplToken },
      })
      .then(res => {
        this.setState({
          game: res.data[0],
        });
      ...

此请求在 Safari 中失败：

INFO basehttp: "OPTIONS /apis/runs/43 HTTP/1.1" 200 0
INFO basehttp: "DELETE /apis/runs/43 HTTP/1.1" 301 0
INFO basehttp: "OPTIONS /apis/runs/43/ HTTP/1.1" 200 0
WARNING basehttp: "DELETE /apis/runs/43/ HTTP/1.1" 401 58

但使用 Chrome 成功了：

INFO basehttp: "OPTIONS /apis/runs/43 HTTP/1.1" 200 0
INFO basehttp: "DELETE /apis/runs/43 HTTP/1.1" 301 0
INFO basehttp: "OPTIONS /apis/runs/43/ HTTP/1.1" 200 0
INFO basehttp: "DELETE /apis/runs/43/ HTTP/1.1" 204 0

生成它的代码如下所示：

      const url = `${simplUrl}/apis/runs/${run.id}`;
      // console.log('url:', url);
      axios
        .delete(url, {
          headers: { Authorization: simplToken },
        })
        .then(res => {
          // console.log(res);
          afterDelete();
        });

Safari 401 响应是：

"detail": "Authentication credentials were not provided."

这是 Safari 为失败的 DELETE 请求记录的信息：

DRF api 视图的使用基于此混合：

class CommonViewSet(viewsets.ModelViewSet):
    authentication_classes = (TokenAuthentication, BasicAuthentication, SessionAuthentication)
    permission_classes = (IsAuthenticated,)

对于本地开发，DRF服务器的CORS设置为：

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

我不明白为什么有些请求在 Safari 中会失败，而另一些则不会。大多数情况下，我想确保所有请求在所有三个浏览器中都能正常工作。

Answer 1

解决方案是在引用单个对象的 URL 中添加尾部斜杠。 DRF 路由器文档 指示正确的模式是：

URL pattern: ^users/{pk}/$ Name: 'user-detail'

无论是 Safari 的 bug 还是功能，在重定向请求中未包含身份验证令牌而导致 401 错误，我将留给读者。

Answer 2

你看到这个了吗？，我不太确定，但这个讨论可能会有所帮助。

此外，由于错误与

token

有关，请尝试验证其是否正确发送或添加到请求中，或者是否具有诸如 bearer 或 somthing 之类的类型。

还尝试记录传入的请求标头及其正文，以便确保没有任何内容丢失或损坏。

由于此问题发生在

DELETE

上，请尝试相互比较所有请求以找出缺少的内容。