Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Request header field … is not allowed by Access-Control-Allow-Headers in preflight response

I use react/express with django as backend.
I am trying to integrate s3 fine uploader and i am getting this issue :Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response when trying to get signature from django,in a post request.
Normally i make all my request in code using fetch but here i make use of the package https://github.com/FineUploader/react-fine-uploader and it make use of xhr ? any one ran into this issue

Synopsis

ERROR: Request header field Cache-Control is not allowed by Access-Control-Allow-Headers in preflight response.

Frontend:React/express/webpack
Backend:Dajngo
Environment:Local (django server,react local api)
cause: xhr?

like image 991
Rob Smith Avatar asked Jul 15 '17 12:07

Rob Smith


People also ask

How do you fix ensure CORS response header values are valid?

The CORS request requires that the server permit the use of credentials, but the server's Access-Control-Allow-Credentials header's value isn't set to true to enable their use. To fix this problem on the client side, revise the code to not request the use of credentials.

What is Access-Control expose headers?

The Access-Control-Expose-Headers response header allows a server to indicate which response headers should be made available to scripts running in the browser, in response to a cross-origin request. Only the CORS-safelisted response headers are exposed by default.

What is the Allow header?

The Allow header lists the set of methods supported by a resource. This header must be sent if the server responds with a 405 Method Not Allowed status code to indicate which request methods can be used.


1 Answers

Your problem is in the backend. Seems like the api you are trying to use is written in django.

The api owner needs to explicitly add that header into the CORS_ALLOW_HEADERS settings. I had the same issue with the Content-Disposition header while uploading images. This is my settings:

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

In your case, that setting needs to include 'cache-control'.

like image 93
jeudyx Avatar answered Nov 09 '22 19:11

jeudyx