C#•5mo ago

Trouble enabling CORS

I'm building a website whose frontend is in React, and whose backend is in ASP.NET. I am currently trying to test sending a GET request from the frontend to be handled by the backend, but sending the request gives me the error in the picture. I have tried fixing it using the method outlined here: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-8.0#cors-with-named-policy-and-middleware but I still get the same error. My Program.cs file:

using gaussBackend.Data;
using gaussBackend.Endpoints;

var MyAllowSpecificOrigin = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args);

var connString = builder.Configuration.GetConnectionString("CommentSection");
builder.Services.AddSqlite<CommentSectionContext>(connString);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigin,
                      policy => 
                      {
                        policy.WithOrigins("http://localhost:5173").AllowAnyMethod();
                      });
});

builder.Services.AddControllers();

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

app.UseCors(MyAllowSpecificOrigin);

app.UseAuthorization();

app.MapCommentsEndpoints();

await app.MigrateDbAsync();

app.Run();

using gaussBackend.Data;
using gaussBackend.Endpoints;

var MyAllowSpecificOrigin = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args);

var connString = builder.Configuration.GetConnectionString("CommentSection");
builder.Services.AddSqlite<CommentSectionContext>(connString);

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigin,
                      policy => 
                      {
                        policy.WithOrigins("http://localhost:5173").AllowAnyMethod();
                      });
});

builder.Services.AddControllers();

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

app.UseCors(MyAllowSpecificOrigin);

app.UseAuthorization();

app.MapCommentsEndpoints();

await app.MigrateDbAsync();

app.Run();

The code I am using to send the request:

function get(page: number) {
  axios
    .get("http://localhost:5295/comments")
    .then((response) => {
      console.log(response.data);
      console.log(page);
    })
    .catch((error) => {
      console.error(error);
    });
}

function get(page: number) {
  axios
    .get("http://localhost:5295/comments")
    .then((response) => {
      console.log(response.data);
      console.log(page);
    })
    .catch((error) => {
      console.error(error);
    });
}

Enable Cross-Origin Requests (CORS) in ASP.NET Core

Learn how CORS as a standard for allowing or rejecting cross-origin requests in an ASP.NET Core app.

2 Replies

Gokul•5mo ago

I am not familiar with react but i can notice one missing code in your cors setup update below line with .AllowAnyHeader() options.AddPolicy(name: MyAllowSpecificOrigin, policy => { policy.WithOrigins("http://localhost:5173").AllowAnyMethod().AllowAnyHeader(); }); reason for doing this is sometime in your request you will be passing few extra headers which might be required example, Authorization header etc. Hope it helps

KrorosOP•5mo ago

Nevermind my deleted message, it worked thank you very much

Gaming

Programming

Trouble enabling CORS