CORS OPTIONS Request Successful, but Hangs in Safari

Question

Safari (10 - OSX El Capitan) Issue with CORS

I'm doing a CORS POST request from AngularJS front-end to Laravel Back-end.

• In Chrome and Firefox, both OPTIONS and POST request return http status 200 OK
• In Safari 10 (OSX), both OPTIONS and POST request return http status 200 OK, but the OPTIONS request keeps loading (http status 200 OK!)

Request Headers

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:x.local
Origin:http://y.local
Pragma:no-cache
Referer:http://y.local/

Response Headers

Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Connection:keep-alive
Content-Length:16
Content-Type:application/json
Date:Mon, 31 Oct 2016 09:22:51 GMT
Server:nginx/1.11.1

Safari hangs, after I get the http status 200 OK (OPTIONS request). What should I do?

Answer 1

Try returning 204 No Content, that worked for me. It is found in some examples with no further explanations.

Answer 2

Make sure you have the Accept header added to your CORS AllowedHeaders options. This solved it for me.

Your request has an Accept header of /, but your CORS options doesn't handle that at all. Modern browsers like Chrome can work without the headers, but Safari has not stayed up to date.