要求ヘッダーフィールドキャッシュ制御は、プリフライト応答のAccess-Control-Allow-Headersで許可されていません

Question

私はreact/expressをdjangoとバックエンドとして使用します。
s3のアップローダを統合しようとしていますが、この問題が発生しています：投稿リクエストでdjangoから署名を取得しようとしているときに、リクエストヘッダーフィールドキャッシュ制御がアクセス制御ヘッダーによってプリフライト応答で許可されません。
通常、fetchを使用してコード内ですべてのリクエストを行いますが、ここではパッケージhttps://github.com/FineUploader/react-fine-uploaderを使用し、xhrを使用しますか？いずれかがこの問題

あらすじに走った

ERROR：リクエストヘッダフィールドのCache-Controlは、プリフライト応じてアクセス制御 - 許可 - ヘッダによって許可されていません。

フロントエンド：リアクト/速達/ WebPACKの
バックエンド：Dajngo
環境：ローカル（ジャンゴ・サーバ、ローカルAPIを反応させる）
原因：XHR？

Answer 1

ファインアップローダの初期化中に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 2

問題はバックエンドにあります。あなたが使用しようとしているapiがdjangoで書かれているようです。

api所有者は、そのヘッダーをCORS_ALLOW_HEADERS設定に明示的に追加する必要があります。画像をアップロードする際にContent-Dispositionヘッダーと同じ問題が発生しました。これは私の設定です：

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

あなたのケースでは、その設定に 'cache-control'を含める必要があります。