React Django REST 框架会话不持久/工作 [英] React Django REST framework session is not persisting/working

问题描述

我正在开发一个以 Django Rest Framework 作为后端、React 作为前端的项目.当我最初在某个函数/视图中设置会话变量时，稍后当我尝试通过 axios 调用访问不同的视图时，并且在该视图中，如果我尝试访问我之前创建的会话变量，则会出现 KeyError.会话似乎没有存储.

I'm working on a project with Django Rest Framework as back-end and React as front-end. When I set a session variable initially in some function/view and later when I try to access the different view through axios call and in that view if I try to access session variable which i created previously, I get KeyError. Session doesn't seem stored.

我在谷歌上搜索了我面临的类似问题.

I googled I got the similar issue which I'm facing.

Django 休息框架 Reactjs 会话不工作

我通过在 axios 调用中添加 { withCredentials: true } 来遵循该过程.现在我得到不同的错误.现在问题是无法访问后端.我收到一个错误，说 Access to XMLHttpRequest at 'http://127.0.0.1:8000/url/' from origin 'http://localhost:3000' 已被 CORS 政策阻止

I followed the process by adding { withCredentials: true } in axios call. Now i'm getting different error. Now the issue is not able to access the backend. I get an error saying Access to XMLHttpRequest at 'http://127.0.0.1:8000/url/' from origin 'http://localhost:3000' has been blocked by CORS policy

我再次搜索了我遇到的问题，发现我必须在 django settings.py 中添加 CORS_ORIGIN_WHITELIST

Again I googled the issue which i'm getting and found that I've to add CORS_ORIGIN_WHITELIST in the django settings.py

我关注了下面的帖子

Django Python 休息框架，chrome 中请求的资源上不存在Access-Control-Allow-Origin"标头，可在 firefox 中使用

我已经像这样添加了 CORS_ORIGIN_WHITELIST

I have added CORS_ORIGIN_WHITELIST like this

CORS_ORIGIN_WHITELIST = ['http://localhost:3000','http://127.0.0.1:3000']

CORS_ORIGIN_WHITELIST = [ 'http://localhost:3000', 'http://127.0.0.1:3000' ]

我仍然面临同样的问题.我不知道出了什么问题.任何人都可以帮助我解决这个问题.

Still i'm facing the same issue. I don't know whats going wrong. Can any one please help me on this issue.

谢谢.

推荐答案

经过大量研究，我终于找到了解决方案.

Finally after so much of research I found a solution for this.

在我们导入 axios 进行调用的文件中，在您的导入下方设置默认标头axios.defaults.withCredentials = true;

In the file where we are importing axios to make the call, set the default header below your import axios.defaults.withCredentials = true;

示例:

import axios from "axios";

axios.defaults.withCredentials = true;

axios.get("url")
.then(response => { 
   console.log(response) 
})
.catch(error => {
    console.log(error);
});
      

完成后转到您的 settings.py 文件并添加以下配置

once this is done go to your settings.py file and add the below configuration

CORS_ORIGIN_ALLOW_ALL = 真

CORS_ALLOW_CREDENTIALS = 真

所以在此之后，如果您设置一个会话变量并稍后在任何视图中访问它，您将能够获得您之前存储的值.

so after this if you set a session variable and access it later in any view, you would be able to get the value which you had previously stored.

这个解决方案对我有用.希望如果有人有同样的问题，它也适用于他们.:)

This solution worked for me. Hopefully if anyone has the same issue, it will work for them too. :)

注意

如果会话未存储在 localhost:3000 下，请确保您通过 127.0.0.1:3000 访问前端应用程序.如果您通过 localhost 访问前端应用程序，并且您的后端在 127.0.0.1 上运行，则会话 cookie 将设置为 127.0.0.1strong>，因此将前端 URL 从 localhost:3000 更改为 127.0.0.1:3000 将解决您的问题.

If the session is not storing under localhost:3000 then make sure that you're accessing your front-end application through 127.0.0.1:3000. If you access the front-end application through localhost and if your backend is running on 127.0.0.1 then the session cookie will be set to 127.0.0.1, so changing the front-end URL from localhost:3000 to 127.0.0.1:3000 will solve your problem.

这篇关于React Django REST 框架会话不持久/工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！