CORS error in Safari, not in Chrome

Question

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.

Answer 1

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.

Answer 2

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