POST 请求返回 401 Unauthorized（仅在 Chrome 中）

Posted 2023-02-23

【中文标题】POST 请求返回 401 Unauthorized（仅在 Chrome 中）

【英文标题】：POST request returning 401 Unauthorised (only in Chrome)

【发布时间】：2022-01-11 16:01:26

【问题描述】：

我正在使用 Django Rest Framework 和 Vue.js 来构建一个基本的 Web 应用程序，并且目前正在研究身份验证。在注册新用户时使用 axios 发送 post 请求在 Chrome 中由于某种原因返回 401，但在其他浏览器（Edge）中有效并返回 201 Created。

chrome 中的错误是“detail: Invalid Token”，但是这个特定的端点（注册）甚至不需要 auth/token 就可以访问。

我的前端在http://192.168.1.33:8080，我的后端在http://127.0.0.1:8000 我正在尝试将数据发布到http://127.0.0.1:8000/api/v1/users/auths/

尝试请求后 chrome 开发工具中的“网络”选项卡：

Request URL: http://127.0.0.1:8000/api/v1/users/auths/
Request Method: POST
Status Code: 401 Unauthorized
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: http://192.168.1.33:8080
Allow: GET, POST, HEAD, OPTIONS
Content-Length: 27
Content-Type: application/json
Date: Mon, 06 Dec 2021 12:19:15 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.8.5
Vary: Accept, Origin
WWW-Authenticate: Token
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Authorization: Token acf8b9099de5eba413dea141ce2c06b6cfb03159
Connection: keep-alive
Content-Length: 53
Content-Type: application/json
Host: 127.0.0.1:8000
Origin: http://192.168.1.33:8080
Referer: http://192.168.1.33:8080/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/96.0.4664.45 Safari/537.36

尝试相同操作后 Edge 开发工具中的网络选项卡：

Request URL: http://127.0.0.1:8000/api/v1/users/auths/
Request Method: POST
Status Code: 201 Created
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: http://192.168.1.33:8080
Allow: GET, POST, HEAD, OPTIONS
Content-Length: 89
Content-Type: application/json
Date: Mon, 06 Dec 2021 12:20:25 GMT
Location: http://127.0.0.1:8000/api/v1/users/auths/12/
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.8.5
Vary: Accept, Origin, Cookie
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Authorization
Connection: keep-alive
Content-Length: 51
Content-Type: application/json
Host: 127.0.0.1:8000
Origin: http://192.168.1.33:8080
Referer: http://192.168.1.33:8080/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Microsoft Edge";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.43

明显的区别是Chrome Network标签中有一个“WWW-Authenticate: Token”，很奇怪。

CORS 标头和所有标头都已正确设置，而且问题仅在 Chrome 中。这是 Chrome 的一些怪癖，还是我遗漏了什么？

【参考方案1】：

为什么在一个问题上花费了大约两个小时后，您才将它发布到论坛上后才得到答案？可能与明确和正式地解决问题有关......

无论如何。原来问题在于 Chrome 的本地存储中有一个随机令牌，这导致了“无效”令牌的所有问题。我清除了本地存储，它现在正在工作。不知道为什么我必须专门这样做——我之前已经确保清除缓存......