1

tengo una API creada por mi en C# la cual quiero consumir desde javascript con Typescript. Pero al momento de consumirla me da error diciendo que CORS esta bloqueado la conexion desde localhost.

En mi API tengo configurado mis politicas CORS de esta manera:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();

builder.Services.AddCors(options => {
    options.AddPolicy(name: Constants.MY_CORS,
                      builder => {
                          builder.AllowAnyOrigin()
                                 .AllowAnyHeader()
                                 .AllowAnyMethod();
                      });
});

var app = builder.Build();

app.UseResponseCaching();

app.UseHttpsRedirection();

app.UseAuthentication();

app.UseAuthorization();

app.MapControllers();

app.UseCors(Constants.MY_CORS);

app.UseMiddleware<RoleMiddleware>();

app.Run();

en mi aplicacion cliente tengo una funcion generica que ejecuta peticiones contra API

export async function ExecuteRequest<T>(url: string, body: string, requestType: RequestType, JWT: string = ""): Promise<ErrorResponse | ApiResponse<T>> {
  const uri = Environment.getInstance().urlApi + url;

  let obj: ErrorResponse | ApiResponse<T>;
  try {
    let head: Record<string, string> = {};
    head.Accept = "application/json";
    head["Content-Type"] = "application/json";

    if (JWT !== "") {
      head.Authorization = `Bearer ${JWT}`;
    }

    let response = await fetch(uri, {
      method: requestType,
      headers: head,
      body: body,
    });

    var data = await response.json();

    if (data.statusCode >= 200 && data.statusCode < 300) {
      obj = new ApiResponse<T>(data.statusCode, data.message, data.data);
    } else {
      obj = new ErrorResponse(data.statusCode, data.title, data.message);
    }
  } catch (error) {
    obj = new ErrorResponse(400, data.title, data.message);
  }

  return obj;
}

al momento de llamar a esta funcion con los datos correctos de endpoint en el navegador me da el siguiente error:

Access to fetch at 'http://www.xxxxxx.com/api/Authentication/Login' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request

La API la tengo desplegada en Azure y tengo configurado de esta manera el CORS

introducir la descripción de la imagen aquí

Ya he probado podiendo un wildcard en vez de especificar localhost en el CORS de azure y tambien lo he hecho marcando el checkbox Enable Access-Control-Allow-Credentials pero el resultado es el mismo.

3
  • ¿Hay “use. CORS” ? Incluye todo tu archivo principal para ver el orden de los middlewares y de las cosas que usas.
    – fredyfx
    Commented el 22 may. a las 4:20
  • 1
    Actualice el post con la informacion que me pediste
    – MCcover
    Commented el 22 may. a las 12:28
  • Si la respuesta ofrecida solucionó tu problema, márcala cómo aceptada para que la salud del sitio se mantenga (% de preguntas resueltas). Saludos.
    – fredyfx
    Commented el 9 jun. a las 8:58

2 respuestas 2

0

espero que te encuentres bien.

Intenta lo siguiente:

En tu configuración de azure, en Allowed Origins, ingresa tu ip de tu maquina local y el puerto, puedes verla en esta web: https://www.whatsmyip.org/

Copias tu ip y la agregas a la configuracion Allowed Origins, en vez de "http://localhost:5173", pon: "http://mi_ip:5173"

Espero que te ayude.

0

En referencia a la imagen, lo resaltado:

EN: To allow all, use "*" and remove all the other origins from the list.

ES: Para permitir todos, utiliza "*" y retira todos los demás orígenes de la lista.

Es probable que tengas que dar click en el checkbox después de haber colocado el asterisco y haber eliminado los localhost de la lista.

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.