Django和React：请求头中未设置CSRF cookie。

Question

Django和React：请求头中未设置CSRF cookie。

javascriptpythonreactjsdjangohttp-headers

3

为了解释我的情况，如果我从后端登录，csrf cookie会设置在cookie选项卡中，在前端出现问题，如果我尝试从那里登录，请求头中没有csrf cookie（未定义），以下是提供的一些代码：

settings.py:

ALLOWED_HOSTS = ['*']
ACCESS_CONTROL_ALLOW_ORIGIN = '*'
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
ACCESS_CONTROL_ALLOW_CREDENTIALS = True
ACCESS_CONTROL_ALLOW_METHODS = '*'
ACCESS_CONTROL_ALLOW_HEADERS = '*'

'''
SESSION_COOKIE_SECURE = True
'''
CSRF_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SAMESITE = 'None'


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

将 SAMESITE 协议设置成其他值并没有产生任何变化。

在 views.py 中，我们有登录视图（基于类）：

class LoginView(views.APIView):
    permission_classes = [AllowAny,]
    serializer_class = serializer.LoginSerializer
    def post(self,request):
        data = serializer.LoginSerializer(data=request.data)
        print(data.is_valid())
        if data.is_valid():
            email = data.data['email']
            password = data.data['password']
            auth = authenticate(username=email,password=password)
            if auth:
                login(request,auth)
                return HttpResponse("Success",status=200)
            else:
                print(password == "")
                if email == "" and password =="":
                    return HttpResponse('Both email and password field are empty',status=400)

                elif email == "":
                    return HttpResponse('Email field is empty',status=400)
                elif password == "":
                    return HttpResponse('Passowrd field is empty',status = 400)
        else:
            return HttpResponse("Both email and password fields are empty",status=400)

在serializer.py中，我们有登录序列化程序：

class LoginSerializer(serializers.Serializer):
    email = serializers.CharField(required=False)
    password = serializers.CharField(required=False,allow_null=True,allow_blank=True)

在React（前端）中，这是我进行POST请求的方式：

function Login(){
    const [login,setLogin] = useState({'email':'','password':''})
    const {email,password} = login
    const navigate = useNavigate()

    let handleChange = (e)=>{
        setLogin(
            {
                ...login,
                [e.target.name]:e.target.value
            }
        )

    }

    
    let handleSubmit = (e)=>{
        e.preventDefault()
        axios.post('http://127.0.0.1:8000/login/',login,{headers: {'Content-Type': 'application/json','X-CSRFToken':Cookies.get('csrftoken')}}).then(
            (res)=>{

 
                    console.log(res)
                    console.log(Cookies.get('csrftoken')) //undefined here

            }
        ).catch((e)=>{
    console.log(e)
            }
        })

    }
}

这是代码的一部分，顺便提一下^。

编辑：我还有一个CSRF视图，不确定如何使用：

class GetCSRFToken(views.APIView):
    permission_classes = [AllowAny, ]

    def get(self, request, format=None):
        return Response({ 'success': 'CSRF cookie set' })

欢迎任何帮助。

- Ghazi

你是否有发送CSRF cookie到前端的视图或者ReactJS获取它的方式？ - Jony_23

@Jony_23 是的，我刚刚更新了我的代码，不确定如何通过这个视图发送csrf cookie，但是我只为这个视图编写了一个get方法。 - Ghazi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jony_23 · Accepted Answer

我建议您尝试使用HTTPS在两个服务器上进行工作。以下是一些帮助：

对于ReactJS，只需使用与Django生成的相同证书运行服务器，使用以下命令：

HTTPS=true SSL_CRT_FILE=path/server.crt SSL_KEY_FILE=path/server.key npm start

这样可以更改您的设置：

CSRF_COOKIE_PATH = '/'
CSRF_COOKIE_SAMESITE = 'Strict'  
CSRF_COOKIE_SECURE = True
CSRF_TRUSTED_ORIGINS = [ "https://127.0.0.1:3000", ...]

但这并非完全必要。

现在，您的视图GetCSRFToken不正确，因为返回了一条消息。我已经实现了一个示例，关键在于装饰器ensure_csrf_cookie

Views.py:

from django.utils.decorators import method_decorator
from django.views.decorators.csrf import ensure_csrf_cookie

class CsrfTokenView(APIView):
"""Send to the login interface the token CSRF as a cookie."""

    @method_decorator(ensure_csrf_cookie)
    def get(self, request, *args, **kwargs) -> Response:
        """Return a empty response with the token CSRF.

        Returns
        -------
        Response
            The response with the token CSRF as a cookie.
        """
        return Response(status=status.HTTP_204_NO_CONTENT)

在ReactJS中，只需编写一个具有空依赖项的useEffect来在组件挂载后立即执行请求。

useEffect(() => {
    axios.get('/url/csrf-token/', {
            headers: { 'Authorization': null },
            withCredentials: true,
        }
    ).catch( () => {
        alert('Error message.');
    });
}, []);

现在，您可以在“开发者工具”中查看cookie。

最后，在您的LoginView中为post方法添加csrf_protect装饰器，以确保该端点需要CSRF_TOKEN。

views.py：

from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_protect, ensure_csrf_cookie
...

class LoginView(views.APIView):
    ...
    @method_decorator(csrf_protect)
    def post(self,request):
        # code

不要忘记映射csrf视图的url并在请求中正确地放置（useEffect）。

另外，在登录请求中添加withCredentials: true。这样请求就会发送cookie（CSRF）。Django将比较头部X-CSRFToken与接收到的cookie值，如果匹配，则执行方法体。

我认为就是这些了。如果有用，请告诉我。