Where
IOS safari
IOS version - 14.4
Safari settings
Prevent Cross Site Tracking - ONBlock all cookies - OFF
Problem Statement
All requests to API host remain in Pending State until the page is reloaded.
What is Pending State here?
In safari devtools - Request is sent but response did not come back.
However, the request does not go to server/network layer.
Behavior pattern
Random
Hosts
website (TOP) - www.example.com
api - api.example.com (Requests go from top frame)
Error
We can see the following error from previous page context after reload,
XMLHttpRequest cannot load <url> due to access control checks.
No other error is in the console to specifically tell what happened.
Note: we make parallel request to different endpoints of api.example.com
Debug
Charles Proxy
Request to api.example.com is not sent to network layer. However, request to www.example.com can be seen in Charles Proxy and works fine.
Clearing State
None of the following worked
localStorage.clear()
sessionStorage.clear()
clear all cookie from safari dev tools
reload with disable cache (alt+cmd+r)
Private Mode
Private Mode at the same time works fine.
Remove All Website Data
Doing the following fixes the issue,
Settings -> Safari -> Advanced -> Website Data -> Remove All Website Data
However, it comes back after some time(/browsing).
CNAME (simplified)
nslookup www.example.com
www.example.com canonical name = www.a.com
www.a.com canonical name = www.example.com.edgekey.net.
www.example.com.edgekey.net. canonical name = abc.x.edge.net
Name: abc.x.edge.net
Address: 24.75.214.150
nslookup api.example.com
api.example.com canonical name = abc.x.edge.net
Name: abc.x.edge.net
Address: 24.75.214.150
Why talking about CNAME?
Since disabling cache did not send the request to network layer, I am guessing the issue can have some relation with CNAME cloaking defense of Safari ITP or ITP overall.
Please feel free to ask for more details.
Does anyone has some idea why this issue can happen or how to fix it?