Я столкнулся с проблемой при разработке моего приложения, и теперь я застрял. Мое веб-приложение представляет собой очень простой интерфейс для регистрации / регистрации / изменения пользователей с использованием стека MERN вместе с Redux и Ax ios. При вызове / обновлении конечной точки, например, так:
export const updateUser = (userData, history) => dispatch => {
let token = localStorage.getItem("jwtToken");
axios.defaults.headers.common["Authorization"] = token;
console.log(token);
axios
.patch('http://localhost:5000/api/users/update', userData, { crossdomain: true })
.then(res => {
history.push("/dashboard");
})
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
Однако я продолжаю получать ошибку авторизации cors («отсутствует токен авторизации в заголовке CORS« Access-Control-Allow-Headers »в запросе CORS OPTIONS»), хотя В приведенном выше коде вы можете четко видеть, что я его устанавливаю явно (я установил его еще раз раньше, сразу после входа пользователя).
У меня ранее были похожие проблемы с CORS при запросах входа в систему / регистрации, но они были исправлены, когда я добавил в бэкэнд:
router.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Разве у меня не должно быть такой же проблемы раньше, при вызове базы данных с запросами входа в систему / регистрации? Назначенный токен не пуст, и все конечные точки работают нормально при тестировании с почтальоном. У меня закончились идеи, что делать.
Это вызывающий компонент:
import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { updateUser } from "../actions/authActions";
import { deleteUser } from "../actions/authActions";
import classnames from "classnames";
class DataChange extends Component {
constructor() {
super();
this.state = {
name: "",
email: "",
password: "",
password2: "",
errors: {}
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({
errors: nextProps.errors
});
}
}
onChange = e => {
this.setState({ [e.target.id]: e.target.value });
};
onDeleteClick = e =>{
e.preventDefault();
this.props.deleteUser(this.props.auth.user.id);
}
onSubmit = e => {
e.preventDefault();
const newUser = {
id: this.props.auth.user.id,
name: this.state.name,
email: this.state.email,
password: this.state.password,
password2: this.state.password2
};
console.log(newUser);
this.props.updateUser(newUser, this.props.history);
};
render() {
const { errors } = this.state; return (
<div className="container">
<div className="row">
<div className="col s8 offset-s2">
<Link to="/dashboard" className="btn-flat waves-effect">
<i className="material-icons left">keyboard_backspace</i> Back to
home
</Link>
<div className="col s12" style={{ paddingLeft: "11.250px" }}>
<h4>
<b>Zmień</b> dane
</h4>
</div>
<form noValidate onSubmit={this.onSubmit}>
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.name}
error={errors.name}
id="name"
type="text"
className={classnames("", {
invalid: errors.name
})}
/>
<label htmlFor="name">Name</label>
<span className="red-text">{errors.name}</span>
</div>
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.email}
error={errors.email}
id="email"
type="email"
className={classnames("", {
invalid: errors.email
})}
/>
<label htmlFor="email">Email</label>
<span className="red-text">{errors.email}</span>
</div>
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.password}
error={errors.password}
id="password"
type="password"
className={classnames("", {
invalid: errors.password
})}
/>
<label htmlFor="password">Password</label>
<span className="red-text">{errors.password}</span>
</div>
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.password2}
error={errors.password2}
id="password2"
type="password"
className={classnames("", {
invalid: errors.password2
})}
/>
<label htmlFor="password2">Confirm Password</label>
<span className="red-text">{errors.password2}</span>
</div>
<div className="col s6" style={{ paddingLeft: "11.250px" }}>
<button
style={{
width: "150px",
borderRadius: "3px",
letterSpacing: "1.5px",
marginTop: "1rem"
}}
type="submit"
className="btn btn-large waves-effect waves-light hoverable blue accent-3"
>
Wprowadź zmiany
</button>
</div>
<div className="col s6" style={{ paddingLeft: "11.250px" }}>
<button
style={{
width: "150px",
borderRadius: "3px",
letterSpacing: "1.5px",
marginTop: "1rem"
}}
onClick={this.onDeleteClick}
className="btn btn-large waves-effect waves-light hoverable red accent-3"
>
Usuń użytkownika
</button>
</div>
</form>
</div>
</div>
</div>
);
}
}
DataChange.propTypes = {
updateUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
const mapDispatchToProps = {
deleteUser,
updateUser,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(DataChange));