Preflight response is not successful in Capacitor iOS platform

Hi everyone!
I have a problem when I am trying to do a Http call using capacitor (iOS platform).
The error is the following:
[Error] XMLHttpRequest cannot load https://… due to access control checks.
Failed to load resource: Preflight response is not successful

I think that the issue is related to the origin, in that case is: capacitor://localhost, so I included that origin in the backend side as allowed origin but it is still not working…

I have the service hosted in Azure Cloud and when I am trying to set the cors rules it doesn’t allow origins starts with capacitor://… only allows http:// or https://.

Thanks in advance!

I haven’t configured an app with Azure yet, so some suggestions to try:

  • Review the Ionic CORS docs, that mention preflights at the beginning
  • Debug your app locally on a device, and trigger calls to Azure. From DevTools, open the Network tab to look at those Azure API calls - the preflight failures should show more detail. Might give you something to go off of
  • If nothing else works, you can always remove all Allowed Origins and use asterisk/star, as Azure mentions in your screenshot above: * However, that’s not the best for security so don’t do that if this is a serious/business app.

Use Charles proxy to see what the real error is. Safari dev tools don’t show the raw request to be able to help.

Thanks for your answer @netkow!
However, I already applied your solution.
After some research I found the following topic in Azure:

The point is that iOS uses a diferent origin than Android, thus, Azure doesn’t support it in the CORS section.
I would like to know why iOS uses capacitor://localhost instead of http://localhost like Android.
Is there any possible solution or workarround?

Thanks in advance!

We’ll try to get in touch with the Azure team. As a workaround, check out the HTTP plugin, which uses native HTTP connections (aka bypassing this issue entirely, I think).