Failed to load resource: Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin. Status code: 200

If you are getting the following error in your Ionic app while calling your APIs:

Failed to load resource: Origin capacitor://localhost is not allowed by Access-Control-Allow-Origin. Status code: 200

then you need to add a CORS entry in your AllowedOrigins list at the API end application.

Below is an example of what to do when the API end point is a dotnet core application:

In the app config add capacitor://localhost to a property named AllowedOrigins.

{
  "AppName": "Your App",
  
  "AllowedOrigins": "capacitor://localhost",
  
}

In the above we added capacitor://localhost as an allowed origin.

Next, in main method of Program.cs in dotent core application, we need to add the following code to make use of that property

            var allowedOrigins = configuration["AllowedOrigins"];
            if (!string.IsNullOrEmpty(allowedOrigins))
            {
                var origins = allowedOrigins.Split(";");
                app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().WithOrigins(origins)
                  .AllowCredentials());// to allow cookies to be set from the server to the client.
            }

Restart the dotnet core application. The CORS issue will be fixed now.