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
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)
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.Access-Control-Allow-Origin: *