Django Rest Framework 无法通过 React 获取 CSRF Token答案

【问题标题】：Django Rest Framework can't get CSRF Token by ReactDjango Rest Framework 无法通过 React 获取 CSRF Token
【发布时间】：2022-11-05 18:58:40
【问题描述】：

我已经花了六个小时在上面，但我仍然无法处理获取 CSRF 令牌和会话 ID。

我有这两个简单的功能：

@api_view(["GET"])
@ensure_csrf_cookie
def getCsrf(request):
    return Response({'success': get_token(request)})

@method_decorator(csrf_exempt, name='post')
class LoginView(views.APIView):

    permission_classes = (AllowAny,)

    def post(self, request, format=None):
        serializer = LoginSerializer(data=self.request.data, context={ 'request': self.request })
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data['user']
        login(request, user)
        return Response(None, status=status.HTTP_202_ACCEPTED)

我安装了corsheaders，并且有以下设置：

CORS_ALLOWED_ORIGINS = [
    'http://127.0.0.1:3000',
    'http://localhost:3000',
    'http://127.0.0.1:8000',
    'http://localhost:8000',
]

CSRF_TRUSTED_ORIGINS = [
    'http://127.0.0.1:3000', 
    'http://localhost:3000',
    'http://127.0.0.1:8000', 
    'http://localhost:8000',
]

CORS_ALLOW_HEADERS = ('Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials', 'Authorization', 'Content-Type', 'Cache-Control', 'X-Requested-With', 'x-csrftoken')
CORS_ALLOW_CREDENTIALS = True

CSRF_COOKIE_HTTPONLY = False
SESSION_COOKIE_HTTPONLY = False
CSRF_USE_SESSIONS = False

CSRF_COOKIE_SECURE = False
SESSION_COOKIE_SECURE = False
SESSION_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SAMESITE = 'None'

因此，这两个 cookie 都出现在响应中。它们都不是在浏览器中编写的。我已经尝试了我找到的所有东西。这是我的反应部分

axios.defaults.withCredentials = true;

useEffect(() => {
    axios.get(`http://127.0.0.1:8000/csrf/`)
        .then(response => {
            Cookies.set('csrftoken', response['data']['csrf']);
        })
        .catch(error => {
            console.log(error);
        });
}, []);

function onSubmit(e) {
    e.preventDefault();

    let data = {
        username: e.target.username.value,
        password: e.target.password.value
    };

    const config = {     
        headers: { 
            'content-type': 'application/json',
            'Access-Control-Allow-Credentials': 'true',
            'Access-Control-Allow-Origin': 'http://localhost:8000',
            'X-CSRFToken': Cookies.get('csrftoken')
        },
        withCredentials: true,
        crossDomain: true
    }

    axios.post(`http://127.0.0.1:8000/login/`, JSON.stringify(data), config)
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });
}

我不想自己设置cookie，因为它现在处于useEffect中，但我无法让它工作。我不知道如何获取会话 ID，我希望它按预期工作。我试过 Chrome 和 Firefox。他们都没有保存这些cookies。

【问题讨论】：

为什么你有这个Cookies.set('csrftoken', response['data']['csrf'])？您正在尝试从正文响应中读取 csrf 令牌。这是一个 cookie，所以它不会在正文中发送。似乎所有配置都正确，那么请求'127.0.0.1:8000/csrf'的响应状态码是什么？
@Jony_23 我知道我不应该那样设置它，我在我的问题中写道。我在响应正文中返回了 csrf 令牌。它们只是没有在浏览器中设置。我认为这只是某种无法摧毁的东西。起初 CORS 政策限制了一切，因此您在开发阶段无法做任何事情，因为您无法设置 https 连接。然后它仍然不起作用。也许我在这里遗漏了一些东西，但我投降了，我已经做了 JWT Auth。我应该从一开始就这样做以节省时间。
@Jony_23 响应很好，我在 Set-Cookie 标头中看到了 CSRF 令牌和会话 ID。而且他们不是仅限http的
也许只是在 axios 请求工作中添加：axios.get(127.0.0.1:8000/csrf, {withCredentials: true})。您应该尝试设置 CSRF_COOKIE_DOMAIN 并（如果您使用的是 linux）编辑 /etc/host/ 以在两者中设置域；并确定您是否设置了 cookie。
在 https 上运行 django 很容易。检查这些：How can I test https connections with Django as easily as I can non-https connections using 'runserver'?，How to run a local Django development server over HTTPS with a trusted self-signed SSL certificate 获得 csrf 并非不可能。我已经做了。

标签： reactjs django cookies django-rest-framework

【解决方案1】：

const get_cookie = (name) => {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
  };

// then
get_cookie('csrftoken')

【讨论】：