2

tengo una WEB API con .NET 6, al hacer mi trabajo en postman me funciona de maravilla, tengo mi proyecto solo con HTML y JS en el localhost y al tratar de consumir la WEB API, me sale este error

Access to XMLHttpRequest at 'https://localhost:7265/api/Roles/Listar' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

la cuestion es que la URL que genera la WEB API si funciona bien, inclusive si ingreso directamente desde el navegador con el que corro mi proyecto, tambien abre sin problema alguno

introducir la descripción de la imagen aquí

este es mi codigo del js con el que estoy tratando de consumir la Web API

function listarroles(){
    $.ajax({
        type: "GET",
        url: "https://localhost:7265/api/Roles/Listar",
        success: function (result) {
            console.log(result)
        },
        error: function(error){
            console.log('Error: '+error);
        }
    });
};

la verdad he consultado y todo pero no encuentro la solución, solo veo, usa esta linea de require('cors'), pero no muestran donde debe instalarse, busque un codigo y no me deja instalar ese paquete de cors en mi proyecto (ingrese al terminal en la carpeta raiz de mi proyecto y use npm i cors pero nada).

Agradezco mucho su ayuda

Este es el appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MySQLConnection": "server=localhost;port=3306;database=mangoo;uid=root;password=123456789"
  }
}

y este es el program.cs

using API_Mangoo.Data;
using API_Mangoo.Data.Repositorios;
using MySql.Data.MySqlClient;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
var mySQLConfiguration = new MySQLConfiguration(builder.Configuration.GetConnectionString("MySQLConnection"));
builder.Services.AddSingleton(mySQLConfiguration);
//builder.Services.AddSingleton(new MySqlConnection(builder.Configuration.GetConnectionString("MySQLConnection")));
builder.Services.AddScoped<IRolesRepositorio, RolesRepositorio>();
var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

estuve consultando, instale NodeJS y empece a usarlo, pero ahora el problema radica en otra cosa jajajaja

ya quedaron las librerias instaladas, se creo el package-lock.json y el package.json

pero al momento de colocar estas lineas

function listarroles(){
    console.log('iniciando proceso de listar los roles');
    const express = require('express');
    const cors = require('cors');

    const app = express();

    app.use(cors({
    origin: 'https://localhost:8080',
    methods: 'GET, POST, PUT, DELETE',
    allowedHeaders: 'Content-Type, X-Requested-With'
    }));

    $('#tbodyrolessH').empty();
    $('#tablarolesV').empty();
    $.ajax({
        url: "https://localhost:7265/api/Roles/Listar",
        type: 'GET',
        dataType: 'json',
        xhrFields: {
            withCredentials: true
        },
        success: function(data) {
            console.log(data)
        },
        error: function(xhr, status, error) {
            console.log(error)
            console.log(status)
        }
    });
};

y me sale esto

jquery-3.6.0.min.js:2 Uncaught ReferenceError: require is not defined
    at listarroles (<anonymous>:148:21)
    at HTMLDocument.<anonymous> (<anonymous>:2:5)
24
  • eso iria en la peticion ajax cierto? Commented el 21 jun. 2023 a las 18:11
  • 1
    Si usas Node, debes dar permiso a localhost:7265 en el archivo de configuración, para que no te bloquee las peticiones que van dirigidas a esa URL. Revisa esta respuesta. Ante estos casos, la solución simple es sugerir que des permiso a todo, pero no hagas eso, CORS existe para dar seguridad a tu sitio una vez esté en producción, por ejemplo, mediante CORS puedes indicar qué dominios o qué archivos específicos tienen permiso para ejecutarse en tu sitio, lo cual aumenta enormemente la seguridad, bloqueando potenciales archivos extraños.
    – A. Cedano
    Commented el 21 jun. 2023 a las 18:24
  • Como te comentan, esa cabecera es restringida desde el lado cliente, debes añadirla como parte de las cabeceras de respuesta del servidor. Durante desarrollo, lo usual es permitir conexiones desde cualquier origen mediante la cabecera de respuesta: Access-Control-Allow-Origin: * Commented el 21 jun. 2023 a las 18:41
  • Los que cerraron la pregunta por duplicada, podrian señalar cual de las 6 respuesta aplica a este caso que se ocupa .net 6??
    – Yussef
    Commented el 21 jun. 2023 a las 18:52
  • 1
    @FrancescoVirgolini obviamente no, porque ya fue marcada por eso, y porque ninguna de las respuestas es de c#....
    – gbianchi
    Commented el 22 jun. 2023 a las 13:50

1 respuesta 1

1

Lo primero que debes entender es que el bloqueo de CORS lo realiza el NAVEGADOR, al saber esto ya puedes suponer que:

  • Desde javascript no hay nada que puedas hacer para solucionarlo
  • Cuando no ocupas el navegador no tendrás problemas (por ejemplo desde Postman o desde el servidor)

Para permitir solicitudes de origines distintos el servidor debe setear la cabecera de la respuesta correctamente, así el navegador las permitirá.

En .net es posible realizarlo de muchas formas, puede permitir a una lista de subdominios, a ciertos method (get, post, put, etc) o a endpoints particulares. En la documentación hay varios ejemplos.

Para permitir todos los origenes, un program.cs debería verse así:

using API_Mangoo.Data;
using API_Mangoo.Data.Repositorios;
using MySql.Data.MySqlClient;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
var mySQLConfiguration = new MySQLConfiguration(builder.Configuration.GetConnectionString("MySQLConnection"));
builder.Services.AddSingleton(mySQLConfiguration);
//builder.Services.AddSingleton(new MySqlConnection(builder.Configuration.GetConnectionString("MySQLConnection")));
builder.Services.AddScoped<IRolesRepositorio, RolesRepositorio>();

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "origenes", //nombre de la politica
                        policy =>
                        {
                            policy.WithOrigins("*"); //cualquier origen
                        });
});

var app = builder.Build();

app.UseCors("origenes"); //usamos el mismo nombre de arriba


// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();
3
  • Muchas gracias Yussef, esas lineas si funcionaron y la verdad si, intente muchas veces hacerlo desde js y no funcionaba de ninguna forma, te agradezco demasiado Commented el 23 jun. 2023 a las 14:05
  • policy.WithHeaders("*"); Commented el 23 jun. 2023 a las 18:20
  • toca cambir agregar este policy porque con ese codigo igual solo permite GET, toca agregar esta otra para permitir varias funciones Commented el 23 jun. 2023 a las 18:21

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.