Django集成TinyMCE图片上传遇CSRF缺失错误求助

1. 修正images_upload_url配置 #

你当前设置的"static/images/images"是静态文件路径，并非有效的上传处理端点。django-tinymce自带图片上传视图，需将配置修改为：

"images_upload_url": "/tinymce/upload/",

该路径对应你已添加的tinymce.urls中的上传处理视图，无需额外新增URL规则。

2. 修复自定义上传处理器的CSRF令牌携带逻辑 #

你配置了自定义上传处理器tinymce_image_upload_handler，需在请求中手动携带CSRF令牌。打开admin/js/tinymce-upload.js，修改处理器函数：

function tinymce_image_upload_handler(blobInfo, progress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.open('POST', tinymce.activeEditor.settings.images_upload_url);
    
    // 从Cookie中获取CSRF令牌并添加到请求头
    const csrfToken = Cookies.get('csrftoken');
    xhr.setRequestHeader('X-CSRFToken', csrfToken);
    
    xhr.upload.onprogress = (e) => {
      progress(e.loaded / e.total * 100);
    };
    
    xhr.onload = () => {
      if (xhr.status === 403) {
        reject('上传被拒绝：CSRF令牌无效或缺失');
        return;
      }
      if (xhr.status < 200 || xhr.status >= 300) {
        reject('HTTP错误：' + xhr.status);
        return;
      }
      
      const json = JSON.parse(xhr.responseText);
      if (!json || typeof json.location !== 'string') {
        reject('无效的上传响应：' + xhr.responseText);
        return;
      }
      
      resolve(json.location);
    };
    
    xhr.onerror = () => {
      reject('网络错误，无法完成上传');
    };
    
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    
    xhr.send(formData);
  });
}

此代码利用你引入的js-cookie库获取CSRF令牌，确保请求符合Django的CSRF验证规则。

3. 验证CSRF中间件与生产环境配置 #

• 本地和生产环境均需确保django.middleware.csrf.CsrfViewMiddleware在settings.py的MIDDLEWARE列表中（默认已启用）。
• Ubuntu + Nginx生产环境下，需在Nginx的server配置块中添加以下规则，保证请求头正常传递：

location / {
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://your_uwsgi_or_gunicorn_address;
}

4. 生产环境媒体文件配置 #

生产环境需正确配置媒体文件存储与访问：

• 在settings.py中设置：

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• 在Nginx中添加媒体文件访问规则：

location /media/ {
    alias /path/to/your/project/media/;
}

django-tinymce默认将上传图片存储在MEDIA_ROOT/tinymce/目录下，访问路径为MEDIA_URL/tinymce/xxx.jpg。

内容的提问来源于stack exchange，提问作者David Henson