React Django REST框架会话没有持久化/工作

Posted 2023-02-22

【中文标题】React Django REST框架会话没有持久化/工作

【英文标题】：React Django REST framework session is not persisting/working

【发布时间】：2019-12-09 19:43:47

【问题描述】：

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

我用谷歌搜索我遇到了类似的问题。

Django rest framework Reactjs sessions not working

我通过在 axios 调用中添加 withCredentials: true 来遵循该过程。现在我得到了一个不同的错误。现在问题无法访问后端。我收到一条错误消息，提示 CORS 策略已阻止从源“http://localhost:3000”访问“http://127.0.0.1:8000/url/”处的 XMLHttpRequest

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

为此我关注了以下帖子

Django Python rest framework, No 'Access-Control-Allow-Origin' header is present on the requested resource in chrome, works in firefox

我已经像这样添加了 CORS_ORIGIN_WHITELIST

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

不过，我也面临同样的问题。我不知道出了什么问题。

【参考方案1】：

经过这么多研究，我终于找到了解决方案。

在我们导入 axios 以进行调用的文件中，在您的导入下方设置默认标头 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 文件并添加以下配置

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_CREDENTIALS = True

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

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

注意

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

【讨论】：

我遇到了完全相同的问题，这个解决方案奏效了！

【参考方案2】：

我曾经遇到过类似的问题。我使用 firefox 作为浏览器，并通过为 firefox (https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/) 安装 CORS 无处不在的插件解决了这个问题。因此，如果您使用的是 firefox，这可能会解决您的问题。