Random Prelight / OPTIONS requests hanging - ios

Question

Around November 17th we noticed in our production application that some of our IOS users we're experiencing HTTP requests that were hanging for sometimes 10-20 minutes before they would fail.
Example request:
curl 'https://api.example.com/api/' -H 'Accept: application/json, text/plain, */*' -H 'X-Custom-Header: accesstoken' -H 'timezone: America/Toronto' -H 'authorization: auth' --compressed
Example Response:
Headers: None
status: [0]
Current environment
React: 17.0.2
Axios: 1.2.0
Node: 16.3.0
react-query: 4.2.1
aws-amplify: 5.0.2
API:
ExpressJS: 4.18.2
Node: 14.20.1
Cognito-express: 2.0.19
Cors: 2.8.5
Our React application build is hosted on an AWS S3 bucket with Cloudfront. Our DNS provider is Cloudflare. The API is hosted on AWS through elastic beanstalk. The API is served on NginX.
As far as we can tell, nothing significant has changed in the last several weeks that would cause this issue. (configuration as well as code)
Our API headers:
res.setHeader(
'Access-Control-Allow-Methods',
'GET, POST, OPTIONS, PUT, PATCH, DELETE'
);
res.setHeader(
'Access-Control-Allow-Headers',
'origin,X-Requested-With,content-type'
);
res.setHeader('Access-Control-Allow-Credentials', true);
Our cors settings:
app.use(
cors({
origin: [
'https://examplewebapp1.com',
'https://examplewebapp2.com',
'https://examplewebapp3.com',
],
})
);
React Axios instance:
const instance = axios.create({
baseURL: apiURL,
timeout: 30000,
headers: { 'X-Custom-Header': 'accesstoken', 'timezone': timezone},
});
React Axios request interceptor:
instance.interceptors.request.use(
async (config) => {
try {
const session = await Auth.currentSession();
const accessToken = session.accessToken.jwtToken;
config.headers.authorization = accessToken;
return config;
} catch (err) {
if (err === "No current user")
{
console.log("There is no longer a user.")
handleInactiveUser()
}
captureException(err);
throw err;
}
},
(error) => {
return Promise.reject(error);
},
);
React Axios response interceptor:
instance.interceptors.response.use(
async (resp) => {
// irrelevant code
return resp;
},
(error) => {
// check if the preflight failed
if (typeof error.response === 'undefined') {
// preflight failed
}
if (error.response && error.response.data && error.response.data === 'No Active Account') {
// irrelevant code
}
return Promise.reject(error);
},
);
The actual endpoints that fail are seemingly random. There are quite a few endpoints with failing preflights - we don't see a pattern. (Mostly GET requests).
During debugging on safari with the MacOS debugging tools we've seen this error a few times when we were able to replicate the issue.
[Error] XMLHttpRequest cannot load https://api.example.com due to access control checks.
Here's what we know so far:
The users having these problems are users on IOS (versions 15.3.0 to 16.1.2)
Users are on LTE connection (doesn't occur on Wifi)
Chrome browser and Safari are both having the issue
Occurring on both PWA application and regular browsers
Areas we've looked into:
Removed DDOS protection on Cloudflare (thought Cloudflare was blocking requests)
Verified SSL certificates
Updated Axios from 0.27.2 to 1.2.0
Verified CORS settings
Added origin to the access-control-allow-headers
We've recently added react-query (2 months ago)
Updated our aws-amplify to 5.0.2
Verified our cognito user pool on aws is not rate limiting our authentications