ASP.NET Core API not accessible from React.js (CORS)

Question

I'm working on a web app using React for the frontend and ASP.NET Core for the backend.

This is code from my Startup.cs.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(builder =>
            {
                builder.WithOrigins("*").AllowAnyHeader().AllowAnyMethod();
            });
    });
}

This is my full API controller, which is working fine from Chrome when debugging with ISS in Visual Studio 2022.

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace AsignacionesBackend.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class ApiController : ControllerBase
    {
        private readonly ILogger<ApiController> _logger;

        public ApiController(ILogger<ApiController> logger)
        {
            _logger = logger;
        }

        [Route("Login")]
        public IActionResult Login()
        {
            JsonUser body = new JsonUser("hola", "buenas");
            body.Token = "tokendeprueba";
            JsonResult json = new JsonResult(body);
            return json;
        }

        public class JsonUser
        {
            public string User { get; set; }
            public string Pass { get; set; }
            public string Token { get; set; }

            public JsonUser(string user, string pass)
            {
                User = user;
                Pass = pass;
            }
        }
    }
}

This is the React code that is calling the API.

let result = fetch("https://localhost:5001/Api/Login");
result = await (await result).json;
console.log(result);

I'm receiving this error in the Chrome console when executing the React code:

Access to fetch at 'https://localhost:5001/Api/Login' from origin 'https://localhost:3000' has been blocked by CORS policy: 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.

I'm new to both ASP.NET and React so any kind of help or tip is welcome. If you need more info I'll edit the question.

Did you add app.UseCors(); after app.UseRouting in Configure method in startup? — Neistow
– Neistow, Commented Apr 12, 2022 at 11:56
Nope, this was the issue, thank you so much. I saw several tutorials saying that I needed it and other saying that I needed the services.AddCore and I tried both, but didn't think I actually needed both at the same time. — Javito
– Javito, Commented Apr 12, 2022 at 12:04

Neistow · Accepted Answer · 2022-04-12 12:10:40Z

2

CORS is ASP.NET is added in two steps:

Add required services which is done in ConfigureServices in Startup
Add CORS middleware which is done in Configure in Startup

From what you've shown I assume you've missed step 2. In your Configure method in Startup you should add call to UseCors() AFTER UseRouting().

Here is the official page about CORS. Note: examples there are using .NET 6 minimal api, but the idea stays the same - add services then add middleware.

edited Apr 12, 2022 at 12:10

answered Apr 12, 2022 at 12:05

Neistow

1,2941 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Javito Over a year ago

The latest versions of IIS don't use the CORS configuration of .NET, you need to create or modify a file named web.config in your API root. Here is how to configure this.

SirOneOfMany · Accepted Answer · 2022-04-12 11:47:14Z

0

Your Problem is, that your dev server on localhost:3000 is sending an cors header.

Take a look here: https://create-react-app.dev/docs/proxying-api-requests-in-development/

answered Apr 12, 2022 at 11:47

SirOneOfMany

1,1026 silver badges16 bronze badges

Collectives™ on Stack Overflow

ASP.NET Core API not accessible from React.js (CORS)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related