gpt4 book ai didi

javascript - Django 和 React : csrf cookie is not being set in request header

转载 作者:行者123 更新时间:2023-12-05 04:29:02 25 4
gpt4 key购买 nike

为了解释我的情况,如果我从后端登录,csrf cookie 设置在 cookie 选项卡中,问题出现在前端,如果我尝试从那里登录,csrf cookie 不在请求 header 中(未定义),一些提供的代码:

设置.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 协议(protocol)设置为其他任何内容都没有任何改变

在 views.py 中,我们有登录 View (基于类):

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 (前端)中,这是我发出帖子请求的方式:

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 View ,不知道如何使用它:

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

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

欢迎任何帮助。

最佳答案

我建议您尝试使用 HTTPS 来处理您的两台服务器。一些帮助: Django

对于 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", ...]

但并非完全必要。

现在,您的 View 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。最后,在您的登录 View 中添加 csrf_protect post 方法的装饰器,以确保端点需要 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 View 的url并将正确的放入请求中(useEffect)。

同样在您的登录请求中,添加 withCredentials: true。通过这种方式,请求发送了 cookies (CSRF)。 Django 将比较 header X-CSRFToken 与接收到的 cookie 的值,如果匹配,它将执行方法体。

我想就是这样。让我知道它是否有效。

关于javascript - Django 和 React : csrf cookie is not being set in request header,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72449195/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com