Estoy trabajando en una aplicación web usando React para el frontend y ASP.NET Core para el backend.
Este es el código de mi Startup.cs .
public void ConfigureServices(IServiceCollection services) { services.AddControllers(); services.AddCors(options => { options.AddDefaultPolicy(builder => { builder.WithOrigins("*").AllowAnyHeader().AllowAnyMethod(); }); }); }Este es mi controlador API completo, que funciona bien desde Chrome cuando se depura con ISS en 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; } } } }Este es el código React que está llamando a la API.
let result = fetch("https://localhost:5001/Api/Login"); result = await (await result).json; console.log(result);Recibo este error en la consola de Chrome al ejecutar el código React:
El acceso para buscar en 'https://localhost:5001/Api/Login' desde el origen 'https://localhost:3000' ha sido bloqueado por la política de CORS: No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.
Soy nuevo tanto en ASP.NET como en React, por lo que cualquier tipo de ayuda o sugerencia es bienvenida. Si necesita más información, editaré la pregunta.
CORS es ASP.NET se agrega en dos pasos:
ConfigureServices en StartupConfigure en Startup Por lo que has mostrado, asumo que te has saltado el paso 2 . En su método Configure en Startup , debe agregar una llamada a UseCors() DESPUÉS UseRouting() .
Aquí está la página oficial sobre CORS. Nota: hay ejemplos que usan .NET 6 minimal api, pero la idea sigue siendo la misma: agregar servicios y luego agregar middleware.
Su problema es que su servidor de desarrollo en localhost: 3000 está enviando un encabezado cors.
Eche un vistazo aquí: https://create-react-app.dev/docs/proxying-api-requests-in-development/