Question

我正在开发一个具有两个核心的应用程序。客户端使用ReactJs，服务器端使用Django。

客户端会向服务器发出大量GET / POST请求。为了防止CSRF问题，每个Ajax请求都有CSRF-TOKEN。

beforeSend: function (xhr, settings) {                
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader("X-CSRFToken", window.csrftoken);
          }
   [...]
   }

这是服务器的Django / Python视图视图示例：

response = HttpResponse(json.dumps(software_settings), content_type="application/json" )
response['Access-Control-Allow-Origin'] = "*";
response['Access-Control-Allow-Headers'] = "X-Requested-With, X-Prototype-Version, X-CSRF-Token";
response['Access-Control-Allow-Methods'] = "POST, GET, OPTIONS";

我有两大问题：

第一：在线解决方案，window.csrftoken变量通常取自cookie。我真的不知道如何创造它。我使用unversal-cookie来读取和写入React的cookie，但我错过了两个应用程序之间正确的数据流。默认值为＆＃34; null＆＃34;所以第一个调用的空值为CRFT Token;

第二：我的回复有问题。如上所述，我试图从Access-Control中输入大量配置。这是一个请求标题：

Access-Control-Request-Headers:x-csrftoken
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:8000
Origin:http://localhost:3000

这是我得到的错误：

Failed to load http://localhost:8000/get_software_settings/: 
Request header field X-CSRFToken is not allowed by Access-Control-Allow-Headers in preflight response.

我认为考虑到应用程序的流程，我遗漏了一些东西。考虑最后一件事： 在生产中，reactjs应用程序将被编译为与django应用程序（apache）放在同一服务器中。

感谢您的任何建议。

Answer 1

Django生成并提供CSRFToken Django CSRF protection，做出反应并在发出POST请求时传递它，通常是表单提交。

因此，如果您想要遵循此解决方案，请首先请求对django做出反应，以生成CSRFToken并在视图中使用它。

然而，我有一个类似的开发上下文，我使用没有CSRFToken的Django Rest Framework，在django中进行正常登录，并且在每次调用时从react到Django我传递会话cookie（使用withCredencial参数）来检查用户是否是认证

请求CSRF +访问控制允许标头

1 个答案: