React Django REST 框架会话不持久/工作

Aas*_*lli 3 django django-rest-framework reactjs axios

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

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

Django休息框架Reactjs会话不起作用

我通过在 axios 调用中添加{ withCredentials: true }来遵循这个过程。现在我得到不同的错误。现在问题是无法访问后端。我收到一条错误消息,说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

我跟着下面的帖子

Django Python rest 框架,Chrome 中请求的资源上不存在“Access-Control-Allow-Origin”标头,可在 firefox 中使用

我已经像这样添加了 CORS_ORIGIN_WHITELIST

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

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

谢谢你。

Aas*_*lli 7

最后经过这么多研究,我找到了解决方案。

在我们导入 axios 进行调用的文件中,在 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);
});
      
Run Code Online (Sandbox Code Playgroud)

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

CORS_ORIGIN_ALLOW_ALL = 真

CORS_ALLOW_CREDENTIALS = 真

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

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

笔记

如果会话未存储在localhost:3000下,请确保您通过127.0.0.1:3000访问前端应用程序。如果通过访问前端应用程序本地主机,如果你的后台正在运行127.0.0.1那么会话cookie将被设置为127.0.0.1,因此改变从前端URL本地主机:3000127.0.0.1:3000意志解决你的问题。