How do I ensure my React fetch request doesn't get a CORS error when using ASP.NET Core as backend?

Question

I'm working on a fullstack project(using visual studio community IDE) that uses a React frontend and ASP.NET backend. I'm getting CORS error which i have no knowledge on how to fix.

I'm making the following api call in React:

const sendEmail = async(event) => {
        event.preventDefault();
        let baseUrl = '...some base url';
        let emailAddress = email.email_address;
        let emailMessage = emailText.message;
        let emailData = {
            "Id": "demo",
            "Amount": 37200,
            "Sig": "YTdjfyDBFNAKdufyBAiPPeefKLdjnf",
            "emailAddress": emailAddress,
            "notes": emailMessage
        };
        await fetch(`${baseUrl}/api/Email/Send`,{
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(emailData)
        })
        .then((res)=> res.json())
        .then((data) => console.log(data))
        .catch((err) => console.log(err));
    };

and im getting the following error from the ASP.NET backend:

Access to fetch at '.../api/Email/Send' from origin 'https://localhost:44493' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is my Program.cs code:

var builder = WebApplication.CreateBuilder(args);

var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");

builder.Services.AddTransient<BillEmailService>();
builder.Services.AddTransient<TransactionInfoService>();
builder.Services.AddTransient<PaymentProviderService>();
builder.Services.AddTransient<StoreInfoService>();
builder.Services.AddTransient<DbSetup>();


builder.Services.AddTransient<InlineImageService>();
builder.Services.AddHttpClient<InlineImageService>();

builder.Services.AddTransient<Feedback>();

builder.Services.AddTransient<LoyaltyEngineFactory>();
builder.Services.AddHttpClient("LoyaltyEngineFactory");

builder.Services.AddTransient<MasterpassClientFactory>();
builder.Services.AddHttpClient("MasterpassClient");

builder.Services.AddTransient<TransactionInfoFactory>();
builder.Services.AddHttpClient("TransactionInfoClient");

builder.Services.AddSingleton<IDbConnectionFactory>(s => new DbConnectionFactory(connectionString));
builder.Services.AddTransient<IDbAdapter, DbAdapter>();

builder.Services.AddControllers().AddJsonOptions(options =>

    options.JsonSerializerOptions.PropertyNamingPolicy = null);


builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "WebApp", Version = "v1" });
});


var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();

}

app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "WebApp v1"));


app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();
app.UseDefaultFiles();
app.UseStaticFiles();

app.MapControllerRoute("default", "{controller=Demo}/{action=Get}/{id?}");
app.MapFallbackToFile("index.html");



using var scope = app.Services.CreateScope();
var repo = scope.ServiceProvider.GetService<DbSetup>();
await repo!.RunScripts();

app.Run();

How do I go about fixing this error?

score 0 · Answer 1 · answered Jan 18 '23 at 08:00

if CORS policy occurred you can see that in inspect element => network … to handle this, you can introduce your react URL or ip/port to .NET core app

var  MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      policy  =>
                      {
                          policy.WithOrigins("http://example.com",
                                              "http://www.contoso.com");
                      });
});

// services.AddResponseCaching();

builder.Services.AddControllers();

var app = builder.Build();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseCors(MyAllowSpecificOrigins);

app.UseAuthorization();

app.MapControllers();

app.Run();

please read more : https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0

How do I ensure my React fetch request doesn't get a CORS error when using ASP.NET Core as backend?

1 Answers1