请求头域 Cache-Control 不允许

Posted 2023-03-03

【中文标题】请求头域 Cache-Control 不允许

【英文标题】：Request header field Cache-Control is not allowed

【发布时间】：2017-11-16 00:01:10

【问题描述】：

我遇到了一个小问题，将用户上传的图片发送到我们的 api 域我使用的是 dropzone.js，但似乎 html 代码没有错误，@987654322 有错误@代码。

虽然我认为我的 HTML 代码没有任何问题，但我会将其粘贴在下面。

HTML 代码：

<div class="mdl-grid mdl-cell mdl-cell--11-col">
          <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--12-col">
              <div id="profile" class="dropzone">
              </div>

          </div>
    </div>

<script type="text/javascript">

    var mydrop = new Dropzone("div#profile", 
      url: "https://APISITEDOMAIN.COM/",

         paramName: "file",
         maxFiles : 1,
         uploadMultiple: false,
         addRemoveLinks : false,
         acceptedFiles: 'image/*',
         autoProcessQueue: true,
         init: function() 
       var submitButton = document.querySelector("#act-on-upload")
       myDropzone = this;
       submitButton.addEventListener("click", function() 
           myDropzone.processQueue();
       );
       myDropzone.on("addedfile", function(file) 
           if (!file.type.match(/image.*/)) 
               if(file.type.match(/application.zip/))
                   myDropzone.emit("thumbnail", file, "path/to/img");
                else 
                   myDropzone.emit("thumbnail", file, "path/to/img");
               
           
       );
       myDropzone.on("complete", function(file) 
           myDropzone.removeFile(file);
       );
   ,
    );

    console.log( mydrop.dropzone );

</script>

在 API 服务器上，我已将以下内容添加到 .htaccess

ErrorDocument 403 http://SITE.xyz/
RewriteEngine On
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
RewriteCond %REQUEST_FILENAME !-f
RewriteRule ^ index.php [QSA,L]

但是我仍然收到以下错误

XMLHttpRequest cannot load https://apisite.com Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.

【问题讨论】：

CORS - How do 'preflight' an httprequest?的可能重复

【参考方案1】：

尝试将以下属性添加到您的 dropzone 对象“mydrop”：

  headers: 
     'Cache-Control': null,
     'X-Requested-With': null,
   

【讨论】：

虽然这可能会回答这个问题，但最好解释一下答案的基本部分，以及 OPs 代码可能存在什么问题。

【参考方案2】：

根据W3's documentation on CORS with preflight，您需要“包含Access-Control-Request-Method 标头，标头字段值为request method（即使是simple method）”。

希望这会有所帮助！