Я создаю API для отправки базового запроса на вход в систему аутентификации на серверную часть своей колбы, однако при отправке запроса я получаю
{username: "ww", password: "ww"}
POST http://localhost:5000/login 401 (UNAUTHORIZED)
Я зарегистрировал введенные для проверки данные, которые устанавливаются, этоответ возвращается через консоль js в браузере, запись в моей консоли фляги выглядит следующим образом:
127.0.0.1 - - [10/Nov/2019 16:21:07] "OPTIONS /login HTTP/1.1" 200 -
{'username': '', 'password': ''}
127.0.0.1 - - [10/Nov/2019 16:21:07] "POST /login HTTP/1.1" 401 -
Мой маршрут входа в систему фляги выглядит как
@app.route('/login', methods =['POST'])
def login():
if request.method == 'POST':
auth = request.authorization
print(auth)
if not auth.username or not auth.password:
return make_response('Could not verify :(', 401, {'WWW-Authenticate' : 'Basic realm="Login Required"'})
user = User.query.filter_by(username = auth.username).first()
if not user:
return make_response('Could not verify', 401, {'WWW-Authenticate' : 'Basic realm="Login Required"'})
if check_password_hash(user.password, auth.password):
token = jwt.encode({'public_id' : user.public_id, 'exp' : datetime.datetime.utcnow() + datetime.timedelta(minutes=30) }, app.config['SECRET_KEY'])
return jsonify({'token' : token.decode('UTF-8')})
return make_response('Could not verify', 401, {'WWW-Authenticate' : 'Basic realm="Login Required"'})
это компонент входав моем классе экспорта внешнего интерфейса реагирования Логин расширяет React.Component {
constructor(props){
super(props);
this.state = {
username: '',
password: '',
}
}
changeHandler = e => {
this.setState({[e.target.name]: e.target.value})
}
submitHandler = e => {
const headers = {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
}
var username = this.username
var password = this.password
e.preventDefault()
console.log(this.state)
axois.post('http://localhost:5000/login',this.state,{
headers: {
headers
}
,auth: {
username : username,
password: password
}
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
render() {
const {username, password} = this.state
return <div className = "base-container" ref={this.props.containerRef}>
<div className="content">
<div className="logo">
<img src={Logo} alt="Logo"/>
</div>
<form className="form" onSubmit={this.submitHandler}>
<div className="form-group">
<label htmlFor="username"> Username</label>
<input type="text"
name="username"
value ={username}
placeholder="Username"
onChange={this.changeHandler}/>
</div>
<div className="form-group">
<label htmlFor="password"> Password</label>
<input type="password"
name="password"
value={password}
placeholder="Password"
onChange ={this.changeHandler}/>
</div>
<button type="submit" className="btn">Login</button>
</form>
</div>
<div className="footer">
</div>
</div>
}
}
Мой запрос работает с использованием почтальона, поэтому я не уверен, почему он не использует React? Я использую Flask-Cors для предотвращения ошибок CORS и сохранения пользовательских данных в заголовке auth, поэтому я не уверен, почему колба не может их прочитать.
Я очень новичок в этом, поэтому любая помощь будет отличной :) Спасибо!