如何使用 ( React.js / django /django rest framework ) 为 ckeditor

Question

我正在尝试为我的最终学校项目创建一个 Web 应用程序，我决定使用 CKEditor5 创建丰富的测试帖子，我设法将 Ckeditor 与 Django 集成，我可以成功地从管理员咏叹调创建帖子并添加图像，但是当我想从前端做同样的事情时(反应(， 我遇到了一些我不知道如何解决的问题。

因此，当我尝试上传图像时，我在浏览器中收到一个弹出窗口，其中包含消息**无法上传文件**

这是我的编辑器代码(它与文本一起工作(

<CKEditor
editor={ClassicEditor}
data=""
onInit={(editor) => {
// You can store the "editor" and use when it is needed.
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
this.setState({ content: editor.getData() });
}}
onBlur={(event, editor) => {}}
onFocus={(event, editor) => {
console.log("Focus.", editor);
}}
config={{
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: "http://localhost:8000/media/uploads/",
options: {
resourceType: "Images",
},
},
}}
/>

我在上传URL中的URL路径是我在使用管理员ckeditor时放置媒体的路径，我按照我的教程进行操作

这是我在 sittings 文件中设置的变量

STATIC_URL = '/static/'
STATIC_ROOT = 'static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = 'media/'

CKEDITOR_UPLOAD_PATH = 'uploads/'

所以我认为我不应该使用相同的路径，因为我无法在本地主机控制台中发布到此 URL 错误

Forbidden (CSRF token missing or incorrect.): /media/uploads/
[22/May/2020 08:26:49] "POST /media/uploads/ HTTP/1.1" 403 2513

(我不使用 React-create-app 服务器，我将 react 作为 Django 前端应用程序加载到端口 8000 中(

Answer 1

搜索后，解决方案是在请求的标头中传递csrf_token

所以这里我们需要首先从 django 会话中获取csrf_token，然后将其传递给服务器

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}

上面的函数将提取csrf_token，以便您可以调用它并将其存储在const

const csrftoken = getCookie('csrftoken');

然后将标头添加到呼叫中

uploadUrl: "http://localhost:8000/media/uploads/",
options: {
resourceType: "Images",
},
headers: {
'X-CSRF-TOKEN': csrftoken,
}

试试，如果这不起作用，请告诉我。

作为替代方案，您可以尝试使用装饰器包装您的函数，以便csrf_exempt首先看到它会起作用，首先导入它

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt 
def my_view(request):