Unable to resolve this CORS issue with a react frontend-CodePudding

I have read multiple solutions but somehow none worked for me. I am still getting CORS error. I am using a react front end and tried all solutions related to the frontend. I think my problem has to do with the backend .NET

this is how my controller CORS settings look like. I tried the wild card but it does not work either, I am now trying with the frontend address and port and still having CORS issues. any suggestion ?

    [EnableCors(origins: ALLOWED_CORS_ORIGINS, headers: "*", methods: "*", SupportsCredentials = true)]
    public class TroubleshootingDataController : ApiController
    {
        private static readonly ILog logger = LogManager.GetLogger(System.Reflection.MethodBase.GetCurrentMethod().DeclaringType);
        private const string ALLOWED_CORS_ORIGINS = "http://localhost:3000/";

startUp.cs


[assembly: OwinStartup(typeof(WebAPI.Startup))]

namespace WebAPI
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            if (!Debugger.IsAttached)
            {
                //ConfigureAuth(app);
                GlobalConfiguration.Configuration.UseSqlServerStorage("HangfireConnection", new SqlServerStorageOptions { SchemaName = "HangfireConnLiving" });
                var filter = new BasicAuthAuthorizationFilter(
                    new BasicAuthAuthorizationFilterOptions
                    {
                        RequireSsl = true,
                        LoginCaseSensitive = true,
                        Users = new[]
                        {
                            new BasicAuthAuthorizationUser
                            {
                                Login = "",
                                PasswordClear = ""
                            }
                        }
                    });
                app.UseHangfireDashboard("/hangfire", new DashboardOptions
                {
                    Authorization = new[]
                    {
                        filter
                    }
                });
                app.UseHangfireServer();
            }
        }
    }
}

CodePudding user response：

On the backend on the Startup.cs just add this

On configure.

public void Configure(IApplicationBuilder appBuilder, IWebHostEnvironment webHostEnvironment)
{
    appBuilder.UseCors(); // this line must before the appBuilder.UseEndPoints();
}

On ConfigureServices, we configure the cors

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(builder =>
        {
            builder.AllowAnyOrigin();
            builder.AllowAnyHeader();
            builder.AllowAnyMethod();
        });
    });
}

Edit:

It seams you are using a diferent framework or something like that, that I'm used to work with.

try to add this

app.UseCors(CorsOptions.AllowAll);

before the if (!Debugger.IsAttached)