We are having some issues with mobile Safari and desktop with enabling CORS. On other browsers it works just fine. We are using a VueJS SPA which interacts with a Laravel API on the same domain but with a different subdomain like so, spa.com -> api.spa.com. When the SPA is booting up it makes a init(first on created) request to the API. This fails as described on Safari.
We're getting the following error messages in the console:
Origin .... is not allowed by Access-Control-Allow-Origin
XMLHttpRequest cannot load .... due to access control checks.
Failed to load resource: Origin .... is not allowed by Access-Control-Allow-Origin
The weird part is that when we refresh the page after it failed it works and is able to make the first init request. So maby not CORS?! Other weird thing is that this bug only arrises on our production environment, in staging and or test it works just fine with the same Safari browsers used.
Even some older versions(not most recent) of Safari work on production.
Very frustrating..
In Laravel we use the barryvdh/laravel-cors package for controlling CORS settings, in VueJS we use the Axios library:
'supportsCredentials' => true,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['Origin', '*'],
'allowedMethods' => ['*'],
'exposedHeaders' => ['Authorization'],
'maxAge' => 0,
I tried a few different settings like, * or adding Origin, with no result.
export const HTTP = axios.create({
baseURL: (configService.get('baseURL')),
headers: {
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
withCredentials: true,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
timeout: 15000
});
We added axios-retry to make sure if it failed due to some random bug, it can make the request again but also this fails.
We are about to start pulling our hair out.
Any insights as to why our CORS setup is failing for the latest Safari would be appreciated.
Thanks
