If you are experiencing this issue, there is couple of things that you should take a look at. First thing is CORS settings on your server.
It could happen that in Safari you having this issue but not in other browser. The error message can look like this:
Preflight response is nor successful.
XMLHttpRequest cannot load api/your-resource/ due to access control checks.
Failed to load resource: preflight response is not successful.
In my case i am using Laravel and CORS settings looks like this:
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => ['RefreshedToken'],
'max_age' => 0,
'supports_credentials' => true,
];
If you have defined allowed_headers by your self, you should be sure that all requested headers are whitelisted. In some cases you would have to define them all and not use '*'.
Another thing that you should take a look at, is the url used for calling server. If you URL have trailing slash, maybe you should remove it. Because in some cases this leads to redirection on server to URL without trailing slash which caused preflight request to fail on Safari.
api/my-request/ // this will fail
api/my-request // this will work
In order to better understand when preflight request is sent, and what is the logic behind it, i suggest you to read this article from mozzila.org about CORS
