使用FILE上载的POST表单上的Django CSRF令牌丢失或不正确

Question

当我提交表格时，我看到了这个

表明我提交文件以及csrfmiddlewaretoken

然而，POST Handler显示错误消息“CSRF令牌丢失或不正确。”

同时如果我提交没有选择文件的表单 - 那么POST处理程序不会在CSRF上抱怨，它只会在选择实际文件并提交到POST处理程序 model_form_upload

处理程序

def model_form_upload(request):
    if request.method == 'POST':
        form = DocumentForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    else:
        form = DocumentForm()
    return render(request, 'backend/upload.html', {
        'form': form,
        'users':  AppUser.objects.all()
    })

模板

{% extends "backend/base.html" %} {% block content %}{% load static %}

<!-- Page Content Holder -->

<h2 class="hline">Example Form With Progress Bar Uploader</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="line"></div>

<div class="row">
  <div class="col-md-6">
    <form name="documents"
           id="docs"
           data-toggle="validator"
           class="dropzone"
           role="form"
           enctype="multipart/form-data"
           action=""
           method="POST">
      {% csrf_token %}

      <div class="form-group">
        <label for="inputUser"
               class="control-label">User</label><br />
        <select class="selectpicker"
               name="user"
               id="user"
               required>
            <option>Please select a user</option>
            {% for user in users %}
            <option value="{{ user.pk }}">{{ user.username }}</option>
            {% endfor %}}
            </select>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group">
        <input id="fileupload"
               type="file"
               name="file"
               multiple />

        <button type="button"
               class="btn btn-primary js-upload-btn">
          <span class="glyphicon glyphicon-cloud-upload"></span> Upload documents
        </button>
        <br /><br />
        <table id="documents-list"
               class="table table-bordered">
          <thead>
            <tr>
              <th>Documents</th>
            </tr>
          </thead>
          <tbody>
            {% for doc in documents %}
            <tr>
              <td>
                <a href="{{ doc.file.url }}">{{ doc.file.name }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>

      </div>


      <button type="submit">Click me</button>

    </form>
  </div>
</div>

<div class="modal fade"
       id="modal-progress"
       data-backdrop="static"
       data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Uploading...</h4>
      </div>
      <div class="modal-body">
        <div class="progress">
          <div class="progress-bar"
                 role="progressbar"
                 style="width: 0%;">0%</div>
        </div>
      </div>
    </div>
  </div>
</div>


{% endblock content %} 

设置

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.http.ConditionalGetMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    # https://opbeat.com/docs/articles/get-started-with-django/#performance-metrics
    'opbeat.contrib.django.middleware.OpbeatAPMMiddleware',
    'libs.middleware.TimezoneMiddleware'
)

# Used to simplify process of doing ajax
# requests through axios
# https://docs.djangoproject.com/en/1.11/ref/csrf/
CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_HEADER_NAME = 'HTTP_X_XSRF_TOKEN'

# see doc here
# https://github.com/ottoyiu/django-cors-headers/
CORS_ORIGIN_ALLOW_ALL = True
# Custom headers
CORS_EXPOSE_HEADERS = ()
CORS_ALLOW_HEADERS = (
    'x-requested-with',
    'content-type',
    'accept',
    'origin',
    'authorization',
    'x-csrftoken',
    'user-agent',
    'accept-encoding',
    'user-timezone'
)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

DEFAULT_FILE_STORAGE = 'django.core.files.storage.FileSystemStorage'