Forbidden (CSRF cookie not set.)

项目是Django4+Vue2，遇到Forbidden (CSRF cookie not set.): /login/，目前已经采取的网上的注释掉'django.middleware.csrf.CsrfViewMiddleware'和使用 @csrf_exempt 来进行处理,但是都没有解决该问题，求帮助。

img

这个错误表明Django的CSRF保护机制没有正确启用。注释掉中间件或使用@csrf_exempt是不推荐的解决方法，因为这会降低Web应用程序的安全性。

要解决此问题，可以采取以下步骤：

确保在Vue前端请求Django后端时，在请求头部添加"X-CSRFToken"键值对，值为浏览器cookie中的"csrftoken"。例如：

javascript
axios.post('http://localhost:8000/api/login/', {
    username: 'example',
    password: 'password'
}, {
    headers: {
        'X-CSRFToken': 'csrftoken value from browser cookie'
    }
})
在Django后端视图函数中使用模板渲染（即通过render()返回html）时，确保包含{% csrf_token %}标签。例如：
html
<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
</head>
<body>
    <form method="post">
        {% csrf_token %}
        <input type="text" name="username">
        <input type="password" name="password">
        <button type="submit">Login</button>
    </form>
</body>
</html>

注意：如果您使用的是Django Rest Framework，则需要在前端请求中添加上述的"X-CSRFToken"键值对，并在后端视图函数中使用@api_view装饰器和serializer_class定义视图和序列化器等组件。另外，如果您使用的是Vue.js框架，可以考虑使用vue-cookies插件来获取和设置浏览器cookie中的csrftoken。