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

Posted 2023-02-22

【中文标题】预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 ...

【英文标题】：Request header field … is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：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？

【参考方案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
        )
      )