1

El problema es el siguiente: Cuando intento loguearme con una Rest API ya desde el formulario en localhost:3000, aparece estos 2 errores en consola:

OPTIONS http://apiIP.com/BackEndDesarrollo/api/login/auth 405 (Method Not Allowed)

Access to fetch at 'http://apiIP.com/BackEndDesarrollo/api/login/auth' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

export default function FormLogin({datosUsuario, error}) {


    const classes = useStyles(); 

  const [anchorEl, setAnchorEl] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const [placement, setPlacement] = React.useState();

  const handleClick = newPlacement => event => {
    setAnchorEl(event.currentTarget);
    setOpen(prev => placement !== newPlacement || !prev);
    setPlacement(newPlacement);
  };
  

  const [usuario, guardarUsuario] = useState({
    Email : '',
    Password : ''
  })

  const leerDato = e => {
    guardarUsuario({
      ...usuario,
      [e.target.name] : e.target.value
    })
    
  }

  const iniciarSesion = e => {
    e.preventDefault();

    datosUsuario(usuario);

  }

  let completarCampos;
  if(error) {
    completarCampos = <Error mensaje='Completar' />
  } else {
    completarCampos = null;
  }


  const signIn = e => {
    e.preventDefault();
console.log(usuario);
    const reqestInfo = {
      method : 'POST',
      body: JSON.stringify(usuario),
      headers: new Headers({
        'Content-Type': 'application/json'
      }),
    };

    fetch('http://hiden.com/BackEndDesarrollo/api/login/auth', reqestInfo)
    .then(res => {
      if(res.ok) {
        return res.json()
      }
      throw new Error('Login invalido...');
    })
    .then(token => console.log(token))
    .catch(e => console.log(e));



  }
        return( 
            <React.Fragment>
           <div className={classes.login}>
          <img src={LogoAvatar} alt='Anodal Avatar'></img>
          <Button className={classes.buttonPanel} onClick={handleClick('bottom-end')} color="inherit">Panel de Usuario<i className="fas fa-angle-down"></i></Button>
          </div>
            
          <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper className={classes.paper}>
              <form 
              onSubmit={signIn}
              className='m-3'
              >
              <TextField
              
              id="email"
              label="Email"
              className={classes.textField}
              margin="normal"
              type="text"
              name="Email"
              onChange={leerDato}
              />
      <TextField
        
        id="contraseña"
        label="Contraseña"
        className={classes.textField}
        margin="normal"
        type="password"
        autoComplete="current-password"
        name="Password"
        onChange={leerDato}
      />
 <div className="row mt-2 mb-2 pb-4">
    <div className="col">
      {completarCampos}
    </div>
    <div className="col">
    <Button type='submit' variant="outlined" size="small" className={classes.button}>
          Iniciar Sesión
        </Button>
    </div>
  </div>
      </form>

            </Paper>
          </Fade>
        )}
      </Popper>

      </React.Fragment>
         );
    }

La api necesita Email y Password para hacer el login: Headers: introducir la descripción de la imagen aquí

Body: introducir la descripción de la imagen aquí

y la respuesta es un objeto con estos datos: { "Id": 6, "Email": "[email protected]", "Password": "123456", "Name": "Daniel Saavedra", "CreatedBy": 5, "UserRole": [], "AccessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1bmlxdWVfbmFtZSI6ImRhbmllbEBhbm9kYWwuY29tIiwibmJmIjoxNTYyMTc0ODIzLCJleHAiOjE1NjIyMTgwMjMsImlhdCI6MTU2MjE3NDgyMywiaXNzIjoiaHR0cDovL2Zyb250ZW5kL0JhY2tFbmREZXNhcnJvbGxvIiwiYXVkIjoiaHR0cDovL2Zyb250ZW5kL0JhY2tFbmREZXNhcnJvbGxvIn0.xOQ4MdsZFgqFeRQfel228gDejIaScH1UVY72y1qh8cU" }

0

1 respuesta 1

0

Esto pasa cuando desde una pagina web tratas de obtener recursos de otro sitio web (en este caso, tu servidor nodejs) Hechate un clavado a toda la información de CORS: https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS Una salida rapida por ahora que estás desarrollando en localhost es, instalar un plugin en tu navegador desde el que entras a localhost:3000 https://addons.mozilla.org/es/firefox/addon/cross-domain-cors/?src=search ó https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

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