预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 ...答案

【问题标题】：Request header field … is not allowed by Access-Control-Allow-Headers in preflight response预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 ...
【发布时间】：2017-12-20 11:16:35
【问题描述】：

我使用 react/express 和 django 作为后端。
我正在尝试集成 s3 精细上传器，但我遇到了这个问题：在发布请求中尝试从 django 获取签名时，Access-Control-Allow-Headers 在预检响应中不允许请求标头字段 Cache-Control。
通常我使用 fetch 在代码中提出所有请求，但在这里我使用包 https://github.com/FineUploader/react-fine-uploader 并且它使用 xhr ？有人遇到过这个问题

概要

错误：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Cache-Control。

前端：React/express/webpack
后端：Dajngo
环境：本地（django server,react local api）
原因：xhr？

【问题讨论】：

标签： django reactjs express webpack django-rest-framework

【解决方案1】：

您似乎需要在初始化 Fine Uploader 时启用cors。

import React, { Component } from 'react'
import FineUploaderTraditional from 'fine-uploader-wrappers'
import Gallery from 'react-fine-uploader'

// ...or load this specific CSS file using a <link> tag in your document
import 'react-fine-uploader/gallery/gallery.css'

const uploader = new FineUploaderTraditional({
    options: {
        chunking: {
            enabled: true
        },
        cors: {
            //all requests are expected to be cross-domain requests
            expected: true,
            //if you want cookies to be sent along with the request
            sendCredentials: true
        },
        deleteFile: {
            enabled: true,
            endpoint: '/uploads'
        },
        request: {
            endpoint: '/uploads'
        },
        retry: {
            enableAuto: true
        }
    }
})

class UploadComponent extends Component {
    render() {
        return (
            <Gallery uploader={ uploader } />
        )
    }
}

详情请见the documentation。

【讨论】：

【解决方案2】：

您的问题出在后端。似乎您尝试使用的 api 是用 django 编写的。

api 所有者需要将该标头显式添加到 CORS_ALLOW_HEADERS 设置中。上传图片时，我对 Content-Disposition 标头有同样的问题。这是我的设置：

CORS_ALLOW_HEADERS = ('content-disposition', 'accept-encoding',
                      'content-type', 'accept', 'origin', 'authorization')

在您的情况下，该设置需要包含“缓存控制”。

【讨论】：

【解决方案3】：

我遇到了完全相同的问题。我调用了一个 API，并添加了一个自定义标头。

我发现我的 fetch 的 POST 是错误的：

fetch('/api/login/', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
        'X-Custom-Token': 'xccxcxcxcxcxc',
      },
      body: JSON.stringify({
        username: this.state.email,
        password: this.state.password
      })
    })

我正在对格式错误的 json 输入进行字符串化。我刚刚修复了 json 有效负载，它工作正常：

fetch('/api/login/', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
          'X-Custom-Token': 'xccxcxcxcxcxc',
        },
        body: JSON.stringify({
          'username': this.state.email,
          'password': this.state.password
        })
      })

【讨论】：