0

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.

introducir la descripción de la imagen aquí

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>
    </>
  );
};
17
  • 1
    El Intercambio de Recursos de Origen Cruzado (CORS) es un mecanismo que utiliza cabeceras HTTP adicionales para permitir que un user agent obtenga permiso para acceder a recursos desde un servidor. Un agente crea una petición HTTP de origen cruzado cuando solicita un recurso desde un dominio distinto, un protocolo o un puerto diferente al del documento que lo generó. Fuente: CORS
    – JoseMgz_Ux
    Commented el 2 dic. 2022 a las 20:20
  • Ok, y como lo soluciono? necesito poder usar la api en mi servidor loca y que los empledos puedan acceder desde afuera. Commented el 2 dic. 2022 a las 20:21
  • Alguien que tenga acceso al servicio o a lo que estes intentando consultar. Que yo sepa por lo regular eso se soluciona por parte del BackEnd.
    – JoseMgz_Ux
    Commented el 2 dic. 2022 a las 20:23
  • Hay formas por decirlo así de librarse de esos problemas de CORS pero es solo con fines de desarrollo ya en producción no te funcionaria.
    – JoseMgz_Ux
    Commented el 2 dic. 2022 a las 20:24
  • Te pongo un ejemplo: Tenia un servicio en C# el cual pues se conectaba a un BD y bla bla, luego desde un Front en React me pegaba a ese servicio pero cuando intente hacer una consulta me dio problemas de CORS (Por lo que describí arriba) entonces en el proyecto C# o sea el Back arregle eso agregando unas configuraciones en el Program.cs
    – JoseMgz_Ux
    Commented el 2 dic. 2022 a las 20:28

1 respuesta 1

0

Has probado colocando el origin dentro de la configuración del cors

app.use(cors({origin: '*'}));

esto hará que este accesible desde cualquier origen.

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.