J'ai une application réagissante qui se repose sur un serveur de nœuds express.
Le routeur Express définit un tas de points d'extrémité de repos. P>
Lorsque je touche les points d'extrémité dans le routeur Express en utilisant Postman, ça marche bien. P>
Quand je frappe le point final avec moi réagissant, ça ne le fait pas. Je vois 400 erreur lorsque mon appel de réagissage fait l'appel en utilisant Axios. P>
C'est ce que mon index.js ressemble à: p> user. JS P> authtroutes.js p> localtrategyauth.js p> Qu'est-ce que je manque? J'ai configuré Cors dans le fichier index.js. Je ne peux tout simplement pas voir où je vais mal. Pourquoi pas mon application de réagissance a frappé les points d'extrémité express du routeur. P> Si j'ai un point final express normal, mon application réagissante est capable de frapper ces points d'extrémité. Par exemple, le noeud final ci-dessous fonctionne bien lorsque mon expérience de réagissage le frappe. P> // axios setup
axios.create({
baseURL: "http://localhost:5000",
// headers: {
// "Content-Type": "application/json",
// },
});
// Handle submit
handleSubmit = async (event) => {
event.preventDefault();
const newUserData = {
// firstName: this.state.firstName,
// lastName: this.state.lastName,
email: this.state.email,
password: this.state.password,
};
const result = await axios.post("/v1/signup", newUserData);
console.log(result);
};
3 Réponses :
Vous devez enregistrer le middleware Cors dans l'application Express.
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
app.use(cors());
app.post("/", (req, res) => {
res.send("Hello World!");
});
const PORT = 5000;
app.listen(PORT, () => console.log(`listening on port localhost:${PORT}`)
J'ai essayé ça sans chance. Je ne suis pas sûr de ce qui me manque. Le problème est avec les points d'extrémité express du routeur. Je ne suis pas capable de frapper les exportations de routeurs express. J'ai ajouté un exemple dans la description.
Essayez de définir ce "proxy": "http: // localhost: 5000" dans réact package.json fichier
J'ai aussi essayé cela dans mon app. Cela n'a pas aidé. J'ai attaché une capture d'écran avec l'erreur 400
Vous pouvez utiliser vérifier mon code pour une erreur Cors.
Activer Cons Cors = Exiger ("Cors"); Pour le bug
Le problème est avec des points finaux express sur le routeur. Les points d'extrémité express normaux fonctionnent bien
400 signifie mauvaise demande, votre problème ne concerne pas de CORS. Vous n'avez pas configuré votre API pour gérer les données JSON qui réagissent à réagir. Il ne peut donc pas lire votre demande.bonne et donne une demande 400-Bad.
Vous devez donc ajouter cette ligne: p>
app.use(express.json());
400 signifie mauvaise demande. Qu'est-ce qui s'affiche sur l'onglet Réponse de la capture d'écran?
Que la réponse que je reçois du serveur de nœuds express lorsque mon application de réagissance fait appel à l'appel.
Qu'est-ce qu'il affiche? Pouvez-vous ajouter à la question. Vous pouvez également ajouter le code de réact où vous appelez cette API?
@Suleymansah Description mise à jour avec le code de réact qui fait appel à l'appel de repos. Qu'entendez-vous par
qu'est-ce qu'il afficheAfficher l'onglet Réponse, droit à l'onglet Headers.
@Suleymansah Description mise à jour avec des images de la demande, des en-têtes et des onglets de réponse.
L'e-mail que vous envoyez n'est pas un email valide, vous obtenez donc une mauvaise demande de 400 mauvaises.
J'ai essayé avec un email valide et son même problème. Je reçois une mauvaise demande. L'email ne devrait pas faire une différence pour le moment. J'essaie simplement d'obtenir un point final frappé par l'application de réaction.
Quelles moyens de colline utilisez-vous? Pouvez-vous ajouter tout le code dans votre fichier principal?
Mis à jour avec le code complet de index.js
Vous obtenez une erreur de 400 mauvaises requéres. Qu'est-ce qui vous fait penser que cela a quelque chose à voir avec Cors?
«Lorsque je frappe les points d'extrémité dans le routeur Express en utilisant Postman, cela fonctionne bien» - Comparez donc les en-têtes de demande envoyés par le navigateur avec ceux envoyés par Postman. Modifiez ceux de Postman pour correspondre, un à un jusqu'à ce que vous déclenchez l'erreur 400. Ensuite, vous saurez quel est le problème.
Pouvez-vous également ajouter des auteurs-authortes.js et ./auth/localstrategyauthy?
@Suleymansah ajouté
authtroutes etlocaltrategyauthVous pouvez également envelopper votre appel d'API dans une prise d'essai et quels affichages dans la console de navigateur?
essayer {const résultat = attendre axios.post ("/ V1 / Signup", NewutherData); console.log (résultat.data); } Catch (err) {console.log ("Erreur:", err.Response.data); } Envoyer un email valide et un mot de passe.@Suleymansah Je reçois cela dans la console
Erreur: La demande a échoué avec le code d'état 400 à CreateError (CatégorieError.js: 16) à la règle (régler.js: 17) à xmlhttprequest.handleload (xhr.js: 61)Pouvez-vous ajouter votre code modèle utilisateur de mangouste?
Mis à jour avec Mongoose UseModel
Quelle est cette ligne?
module.exports = usermodel; Où est-ce que UseModel vient? Normalement, il devrait être comme ceci:module.exports = mongoose.model ("utilisateur", userchema);J'ai copié et collé de manière incorrecte. Mise à jour du modèle
Vous avez une option unique dans le courrier électronique, je pense que c'est le problème. Pouvez-vous essayer avec un e-mail valide et inutilisé comme Test1@gmail.com?
J'ai essayé avec de nombreux emails différents et le même problème. Ça n'aide pas
Laissez-nous Continuez cette discussion en chat .