javascript - Request header field Cache-Control is not allowed - Stack Overflow

admin管理员组

文章数量:1302229

I am having a small issue, with sending users uploaded images to our api domain I am using the dropzone.js, however it seems that while it is not an error with the HTML code, there is an error with the .htaccess code.

While I don't think there is anything wrong with my HTML code I'll paste it below.

HTML code:

<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("plete", function(file) {
           myDropzone.removeFile(file);
       });
   },
    });

    console.log( mydrop.dropzone );

</script>

On the API server I have added the following to .htaccess

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

However I am still getting the following error

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

I am having a small issue, with sending users uploaded images to our api domain I am using the dropzone.js, however it seems that while it is not an error with the HTML code, there is an error with the .htaccess code.

While I don't think there is anything wrong with my HTML code I'll paste it below.

HTML code:

<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("plete", function(file) {
           myDropzone.removeFile(file);
       });
   },
    });

    console.log( mydrop.dropzone );

</script>

On the API server I have added the following to .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]

However I am still getting the following error

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

• javascript
• php
• .htaccess

Share Follow edited Aug 29, 2017 at 19:21 halfer 20.5k1919 gold badges109109 silver badges202202 bronze badges asked Jun 14, 2017 at 2:40 RussellHarrowerRussellHarrower 6,8202525 gold badges112112 silver badges224224 bronze badges 1

• Possible duplicate of CORS - How do 'preflight' an httprequest? – Persson Commented Jun 14, 2017 at 3:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

Try to add the following properties to your dropzone object 'mydrop':

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

According to W3's documentation on CORS with preflight, you need to "include an Access-Control-Request-Method header with as header field value the request method (even when that is a simple method)".

Hope this helps!

本文标签： javascriptRequest header field CacheControl is not allowedStack Overflow