Je travaille sur un tutoriel d'authentification / connexion MERN sur youtube qui utilise Redux. Lors de la tentative de POST d'un utilisateur de test sur le serveur dans Postman, je reçois la demande d'en-tête 431 est une réponse d'erreur trop grande.
J'ai lu à certains endroits que la suppression du cache / de l'historique de votre navigateur fonctionne, alors j'ai essayé cela en vain. J'ai également ajouté une entrée "Clear-Site-Data": "*" à la requête d'en-tête (en plus de "Content-Type": "application / json") qui n'a pas fonctionné non plus.
Code côté client pour l'inscription
onSubmit = e => {
e.preventDefault();
const { name, email, password } = this.state;
const newUser = {
name,
email,
password
};
this.props.register(newUser);
};
//redux actions
export const register = ({ name, email, password }) => dispatch => {
const config = {
headers: {
"Content-Type": "application/json",
"Clear-Site-Data": "*"
}
};
// Request body
const body = JSON.stringify({ name, email, password });
axios
.post('/api/users', body, config)
.then(res =>
dispatch({
type: REGISTER_SUCCESS,
payload: res.data
})
)
.catch(err => {
dispatch(
returnErrors(err.response.data, err.response.status, 'REGISTER_FAIL')
);
dispatch({
type: REGISTER_FAIL
});
});
};
L'utilisateur qui s'inscrit doit envoyer un nom, un e-mail et un mot de passe à ma base de données Mongo connectée, cependant, cela m'arrête et redux atteint le type REGISTER_FAIL que j'ai créé en retournant l'erreur 431. Toute aide serait grandement appréciée. Merci!
7 Réponses :
J'ai eu des problèmes similaires en utilisant simplement localhost (pas limité à redux). Peut-être que cela pourrait aider.
Mettez ceci dans url: chrome: // settings /? Search = cache
Cliquez sur Effacer les données de navigation.
Cochez les cookies et autres données du site (important car les cookies sont dans l'en-tête HTTP) TIck les images et fichiers mis en cache (peut être facultatif)
Cela signifie que vous essayez de faire cette récupération sur votre serveur de développement frontal actuel. Vous devez spécifier l'adresse du serveur. Par exemple:
.post('/api/users', body, config)
Devrais lire
.post('http://localhost:4000/api/users', body, config)
Une autre solution consisterait à changer le proxy ligne dans votre package.json de localhost:3000 à localhost:4000 supposant que 4000 est votre port de serveur réel.
J'avais rencontré le même problème dans mon application angulaire. Après avoir passé beaucoup de temps, j'avais découvert que le problème était lié à Node JS. Nous utilisions Node JS v12.xx, et dans cette version, max-http-header-size réduit à 8 Ko au lieu de 80 Ko. Et le jeton d'authentification que j'avais était d'environ 10 Ko. C'est pourquoi, lorsque je recharge l'application, le navigateur commence à donner l'erreur `` 431 champs d'en-tête de demande trop grands '' pour certains des fichiers. J'avais mis à jour le Node JS v14.xx et il recommence à fonctionner car dans la v14.0.0, max-http-header-size a été augmenté à 16 Ko.
J'espère que ce sera utile.
Une autre suggestion serait d'accéder à vos cookies, dans l'outil d'inspection, et de les supprimer. cookies applicables pour votre localhost:{port} application.
Le problème que j'avais est que j'essayais d'accéder à un fichier dans le répertoire src . Le correctif est de le déplacer vers le répertoire public et cela fonctionne maintenant correctement.
Par exemple, de
public > access-me - index.html - favicon.ico - etc src - App.tsx - etc
à
public - index.html - favicon.ico - etc src > access-me - App.tsx - etc
Est-ce du cours de Brad Travery? Vérifiez "proxy" dans package.json , ou essayez d'utiliser l'URL complète dans la requête axios. J'ai dû redémarrer complètement le serveur après les changements, bc il utilise toujours l'ancien port (btw, j'étais entré dans le mauvais port)
Pas reactjs, mais en utilisant vue-cli , pour des gens comme moi, être stupide cela peut aider:
J'ai démarré mon application Vue sur le port 8080 et mon backend local fonctionnait sur le port 4000 . Cependant, mes demandes pointaient vers 8080 et la réponse que j'ai reçue de Webpack Serving était "431 champs d'en-tête de demande trop grands".
La solution simple était simplement d'utiliser le bon port backend. Même si c'était une erreur vraiment stupide de ma part, le message d'erreur est un peu inutile ici.
Quel est le serveur que vous utilisez? Votre serveur express est-il assis derrière un nginx? Quel middleware express utilisez-vous? De plus, fournir la requête HTTP réelle serait très utile.