CSRF 验证在生产中因跨域 POST 请求而失败

Question

HTTP_X_CSRFTOKEN标头与csrftoken cookie中的内容不匹配。

如何检查饼干？Set-Cookie 不会显示在跨域请求的响应标头中。

我已经按照以下说明进行操作：

CSRF with Django， React+Redux using Axios

有趣的是，我发现"X-CSRFTOKEN"在服务器请求标头上翻译为"HTTP_X_CSRFTOKEN"。

在本地主机下的开发环境中运行良好(尽管我使用了 2 个不同的端口 - 一个用于 django，另一个用于我的前端(。

更新：

似乎csrktoken cookie没有为跨域rquest正确设置(尽管浏览器在请求标头中显示它(，因此X-CSRFTOKEN不会被发送。

我最终添加了一个 API 调用，使用 GET 请求返回当前的 csrftoken，然后使用 X-CSRFTOKEN 标头将其发送回去。

Answer 1

您首先没有提到如何从服务器获取csrftoken，所以我假设它已经存在于您的浏览器中。除了 X-CSRFToken 标头外，还使用 withCredentials: true 在请求中包含 cookie。我正在使用js-cookie库从 cookie 中获取csrftoken。

import Cookies from 'js-cookie';
axios({
    url: 'http://localhost:8000/graphql',
    method: 'post',
    withCredentials: true,
    data: {
        query: `
            {
                // Your query here
            }     
        `
    },
    headers: {
        "X-CSRFToken": Cookies.get('csrftoken')
    }
})

还要将CORS_ALLOW_CREDENTIALS = True添加到您的settings.py中，假设您使用的是django-cors-headers。否则，饼干将不被接受。

Answer 2

您必须

通过 CORS Access-Control-Expose-Headers 指令使 X-CSRFTOKEN 标头可访问。例：

Access-Control-Expose-Headers: X-CSRFTOKEN

此标头必须由您的 API 或 Web 服务器设置，以便浏览器在 CORS 预检请求期间看到它。