I've created and testing my API which responds with authorized or not-authorized when the credentials have been typed in. I have tested this with postman and works perfectly.
The login I am trying to create is on React and is currently looking like this -
import React, { Component } from "react";
import { Button, Form, FormGroup, Input } from "reactstrap";
import { withRouter } from "react-router-dom";
import auth from "./auth";
export class Login extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
login = () => {
auth.login();
};
handleSubmit(event) {
event.preventDefault();
fetch('http://localhost:5000/api/LoginTest', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: {
"username": this.username.value,
"password": this.username.value
}
});
};
render() {
return (
<div className="Login">
<form onSubmit={this.handleSubmit}>
<h2 id="formTitle" className="text-center">
Admin Panel
</h2>
<input
id="inputUsername"
type="text"
placeholder="Username"
name="username"
ref={(ref) => { this.username = ref }}
/>
<input
id="inputPassword"
type="password"
placeholder="Password"
name="password"
ref={(ref) => { this.password = ref }}
/>
<button
id="button"
type="submit"
className="btn btn-block btn-success"
>
Sign-in
</button>
</form>
</div>
);
}
}
export default withRouter(Login);
The 2 errors which I'm currently getting are -
- 415 Unsupported Media Type OR When I use mode: no-cors
- Acces to fetch at "" from origin has been blocked by the CORS policy
Any help on this would be perfect!
