请求标头字段……在预检响应中不被 Access-Control-Allow-Headers 允许

Question

我使用 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?

Answer 1

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

api 所有者需要将该标头显式添加到 CORS_ALLOW_HEADERS 设置中。我在上传图像时遇到了与 Content-Disposition 标题相同的问题。这是我的设置：

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

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

Answer 2

看起来您需要cors在初始化 Fine Uploader 时启用。

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 } />
        )
    }
}

有关详细信息，请参阅文档。