Reputation: 251
I am building a file uploader, using Vue Dropzone on the frontend, and custom PHP on the backend.
My frontend script is sending a request with following headers:
Request headers
POST /jobimport HTTP/1.1
Host: myurl
Connection: keep-alive
Content-Length: 765309
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36
Content-Type: multipart/form-data; boundary=----
WebKitFormBoundaryhaaAoTz2J5iipi3M
Accept: application/json
Cache-Control: no-cache
X-Requested-With: XMLHttpRequest
Referer: http://localhost:8080/import
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,nl;q=0.8,de;q=0.7,fr;q=0.6
In my .htaccess file on the backend, I have added the following lines:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "*"
When using Chrome, the file uploads without problems.
When looking at the request headers, I even see the following:
Response headers
(...)
Access-Control-Allow-Headers: *
Access-Control-Allow-Origin: *
(...)
However, when using Safari, the upload fails, and I get the following error:
Failed to load resource: Request header field Cache-Control is not allowed by Access-Control-Allow-Headers.
XMLHttpRequest cannot load https://myurl. Request header field Cache-Control is not allowed by Access-Control-Allow-Headers.
I don't understand how this works in Chrome, but not in Safari.
Upvotes: 10
Views: 16100
Reputation: 145
If parent domain URL is in https, you must call the ajax URL also in https. If not, not use https. Hope this will help
Upvotes: 2
Reputation: 251
The comments by @sideshowbarker and @roryhewitt are correct,
Safari indeed doesn't support a wildcard *
for Access-Control-Allow-Headers
.
I listed all headers explicitly instead of using a wildcard, and now it works perfectly.
Upvotes: 15