Mi proyecto se encuentra corriendo en un servidor propio de nuestra empresa, lo que hice fue exponer el puerto para poder acceder desde afuera, pero cuando intento hacer peticiones por ejemplo la de loguin me encuentro con el siguiente error
Access to XMLHttpRequest at 'http://192.168.100.11:3001/api/users/login' from origin 'http://nipponcarsrl.ddns.net:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space
private
.
Codigo de mi APP
require('dotenv').config('.env'); // Variables de entorno
const cors = require('cors');
const express = require('express');
const dbConnect = require('./config/mongo'); // Archivo de configuracion de BD
const path = require('path');
const app = express(); // Inicio del servidor
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static('public'));
app.use(express.static(path.join(__dirname, '../front/build')));
// TODO: Main de rutas
const {
damageDetailsRoutes,
sectorDamageRoutes,
severityCodeRoutes,
damageCodeRoutes,
damageTypeRoutes,
damagesRoutes,
usersRoutes,
adminRoutes
} = require('./routes/Index');
app.use('/api/damage-details',damageDetailsRoutes);
app.use('/api/severity-code', severityCodeRoutes);
app.use('/api/sector-damage', sectorDamageRoutes);
app.use('/api/damage-code', damageCodeRoutes);
app.use('/api/damage-type', damageTypeRoutes);
app.use('/api/damages', damagesRoutes);
app.use('/api/users', usersRoutes);
app.use('/api/admin', adminRoutes);
app.listen(process.env.APP_PORT || 3000, () => {
console.log('*** Server running ***');
console.log(`http://localhost/${process.env.APP_PORT || 3000}`);
})
dbConnect();
Archivo Login
import { useForm } from "../../hooks/useForm";
import Swal from "sweetalert2";
import axios from "axios";
import { Global } from "../../helpers/Global";
export const Login = () => {
const { form, changed } = useForm({});
const login = async (e) => {
e.preventDefault();
const user = form;
try {
await axios.post(`${Global.url}users/login`, user).then((res) => {
Swal.fire({
position: "top-end",
icon: res.data.status,
title: res.data.msg,
showConfirmButton: false,
timer: 1300,
toast: true,
});
const { tokenSession, user } = res.data;
window.sessionStorage.setItem("token", tokenSession);
window.sessionStorage.setItem("user", JSON.stringify(user));
window.location.reload();
});
} catch (error) {
console.log(error)
document.getElementById("formLogin").reset();
Swal.fire({
position: "top-end",
icon: "error",
title: error.response.data.msg,
showConfirmButton: false,
timer: 1300,
toast: true,
});
}
};
return (
<>
<h4 className="text-bold">INICIO DE SESION</h4>
<header className="justify-content-center py-3 mb-4 border-bottom">
<form onSubmit={login} id="formLogin">
<div className="row">
<div className="col-6">
<div className="mb-3">
<label className="form-label">Email</label>
<input
type="email"
className="form-control"
name="email"
aria-describedby="emailHelp"
onChange={changed}
/>
</div>
</div>
<div className="col-6">
<div className="mb-3">
<label className="form-label">Contraseña</label>
<input
type="password"
className="form-control"
name="password"
onChange={changed}
/>
</div>
</div>
</div>
<div className="text-end">
<button type="submit" className="btn btn-success">
INGRESAR
</button>
</div>
</form>
</header>
</>
);
};
React
me pegaba a ese servicio pero cuando intente hacer una consulta me dio problemas deCORS
(Por lo que describí arriba) entonces en el proyectoC#
o sea el Back arregle eso agregando unas configuraciones en elProgram.cs