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:
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" }