Question

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

概要

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

前端：阵营/快递/的WebPack
后端：Dajngo
环境：本地（django服务器，反应本地api）
原因：xhr？

Answer 1

您的问题出现在后端。好像你试图使用的api是用django编写的。

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

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

在您的情况下，该设置需要包含＆＃39;缓存控制＆＃39;。

Answer 2

看起来你需要在初始化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。

Answer 3

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

我发现提取的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
        })
      })

预检响应

3 个答案: