1. 程式人生 > >求助:關於django rest framework + vue(element-ui)跨域問題,求助大佬解決...

求助:關於django rest framework + vue(element-ui)跨域問題,求助大佬解決...

前端:

headers: {
  token: ''
}
if (document.cookie.length > 0) {
  var arr = document.cookie.split('; ')
  for (var i = 0; i < arr.length; i++) {
    // 再次切割
    var arr2 = arr[i].split('=')
    // 判斷查詢相對應的值
    if (arr2[0] === 'name') {
      // 儲存到儲存資料的地方
      this.params.name = arr2[1]
    }else if (arr2[0] === 'token') {
      this.params.token = arr2[1]
      this.headers.token = arr2[1]
    }
  }
}
<el-upload
  class="avatar-uploader"
  action="http://127.0.0.1:8000/api/image/upload/"
  :show-file-list="false"
  :data="params"
  :headers="headers"
  :on-error="uploadError"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

後端:

INSTALLED_APPS = [
  'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware',
]
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)
CSRF_TRUSTED_ORIGINS = (
    '*'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

報錯: