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).

Thanks again @netkow!
But my project is a multiplatform solution (mobile and desktop), and that plugin only supports Android and iOS…

There is no better solution? And why iOS platform uses capacitor:localhost? Actually is the only platform that has problems with cors origin…


@netkow I tryied using the plugin but it seems that the origin is the same “capacitor://localhost” which means that can’t pass throug Azure CORS. Do you know if there is another workaround or if a can change the origin header to allow the request pass through CORS?

Thanks in advance.

hey @netkow, any solution for this? We are in the process of porting from cordova to capacitor on 2 enterprise apps and we just hit this wall.

@Arthus15 i know its not ideal, but that plugin Matt links does work for ios. What issues were you having?