Preflight response is not successful in Capacitor iOS platform

Capacitor
1

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://.

image
image.png1826×822 75.4 KB

Thanks in advance!

1 Like
2

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

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

4

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!

5

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

1 Like
6

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…

Thanks!

7

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

8

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.

9

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

10

The solution to this issue is from the Azure side. Use the Azure CLI to add the CORS origin, rather than doing it via the Azure portal UI. The CLI call is:

az webapp cors add --allowed-origins https://myapps.com --name MyWebApp --resource-group MyResourceGroup --subscription MySubscription

Another alternative is to use the Azure Resources Explorer: https://resources.azure.com/subscriptions to edit the configuration files directly. Basically you can expand to yourAppName -> config -> web, edit the CORS and then PUT your changes.

4 Likes
11

You managed to add to the CORS exeption the capacitor://localhost with those steps @daveywc ?

12

Yes I did. I actually got the resolution via lodging a ticket using our paid MS support subscription.

You can see it here in this screenshot from the Azure portal:

image
image398×534 12.3 KB

13

Great, thank you very much, will give it a try and will let you know.

14

It worked, amazing! Thank you very much! Life saving answer!

15

Glad to here that it worked. I was pretty happy myself when I got a solution from Microsoft. It had been holding me back from upgrading for a while.

1 Like
16

Great solution!
For those interested, the solution is still working on 2023.
It worked for me using this variation of the command:
az webapp cors add --resource-group {myRG} --name {myAppName} --allowed-origins capacitor://localhost

2 Likes