为什么ReactTypeScriptaxios会忽略我的CSRF cookies？

Question

优秀的Stack Overflow公民们，你们好！我有一个Django后端服务于React前端。我有一个Django后端服务于React前端。React使用axios来执行请求和处理CSRF魔法（Django在开箱即用）。

我花了不少时间重新了解CSRF和CORS的来龙去脉，最后终于成功地用Django（使用Django REST框架）让东西运行在 http://localhost:8000 和React on http://localhost:3000. 我特别喜欢你可以设置下面的内容，让你的手从其他繁琐的细节中解脱出来。

axios.defaults.xsrfCookieName = XSRF_COOKIE_NAME;
axios.defaults.xsrfHeaderName = XSRF_HEADER_NAME;
axios.defaults.withCredentials = true;

然而，现在我已经将这段代码部署到了我的生产环境中，当我尝试登录时，Django会抱怨（消息说 CSRF验证失败。请求中止).

经过一番研究，我发现这是因为尽管Django发送的是 Set-Cookie 头文件与CSRF标记，它 在我的浏览器中没有被设置. 我的客户端请求中有以下头信息。

Host: backend.example.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Origin: https://frontend.example.com
Connection: keep-alive
Referer: https://frontend.example.com/login

而这是服务器的响应。

HTTP/1.1 200 OK
Connection: keep-alive
Server: gunicorn/20.0.4
Date: Wed, 13 May 2020 09:44:33 GMT
Content-Type: text/html; charset=utf-8
Expires: Wed, 13 May 2020 09:44:33 GMT
Cache-Control: max-age=0, no-cache, no-store, must-revalidate, private
Vary: Cookie, Origin
X-Frame-Options: DENY
Content-Length: 2752
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://frontend.example.com
Set-Cookie: csrftoken=5EStJqz3pq332JlHhlWGGoHkv5pHgVSrYtEQM5wBEcXRYHDErYtf82mvw30kCDw1; expires=Wed, 12 May 2021 09:44:33 GMT; Max-Age=31449600; Path=/; Secure
Via: 1.1 vegur

与上面的请求相比，相同的是... ... localhost 发送 X-CSRFToken 头，并从配置的 csrftoken 在之前的请求上设置的cookie。然而，生产部却没有。我不知道我做错了什么... ...

有人能帮忙吗？

更新1 (5月14日)

我忘了说，我的生产机器是在Heroku上的，我有两台，一台用于CI，一台用于 "适当的生产"。我有两台，一台用于CI，一台用于 "适当的prod"。前者是有问题的，但后者在将前端部署到Heroku后，已经开始为我工作了。myapp.com 和后端到 api.myapp.com，都很安全。它的工作原理是将:

• CORS_ORIGIN_WHITELIST 为 ('https://myapp.com',)
• CSRF_TRUSTED_ORIGINS 到 myapp.com
• SESSION_COOKIE_DOMAIN 到 myapp.com
• CSRF_COOKIE_DOMAIN 到 myapp.com

我还是不知道为什么我的CI环境不能用。我猜测这可能与我在 herokuapp.com 域名，而 "适当的prod "有一个专用域名。

Answer 1

herokuapp.com 被包含在Mozilla基金会的公共后缀列表中。这个列表在几个浏览器的最新版本中使用，如Firefox、Chrome和Opera，以限制cookie的范围。换句话说，在支持该功能的浏览器中，应用程序在? herokuapp.com 阻止设置cookies *.herokuapp.com.

这对使用自定义域的应用程序没有影响。

从 赫国开发中心. 我不得不说，我发现这是一种犯罪，没有办法告诉这是发生在顶级浏览器的现在。无声的失败是唯一的选择，没有办法把失去的睡眠时间都找回来。哦，好吧!