Ionic app error: No 'Access-Control-Allow-Origin' header is present on the requested resource

Issue

I have a mobile app developed in ionic capacitor. The backend to the app is a .net core web api deployed on amazon elastic beanstalk. I am getting CORS error** No ‘Access-Control-Allow-Origin’ header is present on the requested resource** when trying to access the back end using the app.

I have attempted to allow the API to be accessible by any consumer by allowing all origins. Is there need to configure anything on AWS Elastic bean?

var app = builder.Build();
app.UseCors(builder => builder
     .AllowAnyOrigin()
     .AllowAnyMethod()
     .AllowAnyHeader()
     );

Solution

1. Log in to the AWS Management Console and navigate to the Elastic Beanstalk service.
2. Select your application and environment where the .NET Core Web API is deployed.
3. In the navigation pane, click on "Configuration."
4. Under the "Software" section, click on "Edit" for the "Environment properties."
5. Add a new property with the following details:
   • Name: ACCESS_CONTROL_ALLOW_ORIGIN
   • Value: * (or the specific origin you want to allow if you don’t want to allow all origins)
6. Save the changes and wait for the environment to update.

Make sure to remove the CORS configuration you mentioned from your .NET Core Web API code, as the CORS handling will now be done by Elastic Beanstalk.

Answered By – MaikeruDev

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0