Comment réparer une erreur de réseau reçue de la réponse reactjs d'axios ?

Question

Je fais une demande de poste en utilisant axios dans reactjs après la connexion des utilisateurs. C'est ici :

axios.post('https://localhost:3000/api/login/authentication', {
  email: email,
  password: password
})
.then(response => {
  this.props.history.push('/Main')
})
.catch(error => {
  console.log(error)
})

Il va dans l'erreur et je l'enregistre dans la console. Voici ce que j'obtiens :

Error: "Network Error" createErrorhttp://localhost:3000/static/js/0.chunk.js:26742:15 handleErrorhttp://localhost:3000/static/js/0.chunk.js:26293:14

En outre, si cela peut vous aider, je reçois cet avertissement avant l'erreur :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:3000/api/login/authentication. (Reason: CORS request did not succeed)

Quelqu'un peut-il m'aider à résoudre ce problème ? Merci d'avance !

Answer 1

Si vous utilisez une application frontale qui fait une demande à une API dorsale, vous devez inclure certains en-têtes dans le serveur API si ce dernier fonctionne sur un port différent.

Par exemple, si vous servez une application ReactJS avec webpack en mode développement, webpack agit comme un serveur, envoyant l'application reactJS au client. Ensuite, l'envoi de requêtes au serveur d'API nécessitera que ce dernier, exécuté sur un port différent, inclue des en-têtes Access-Control-Allow-Origin dans toutes les réponses http.

Fondamentalement, avant de générer chaque réponse, vous devez définir 'Access-Control-Allow-Origin' a localhost:<port you visit in the browser> .

Dans une application express basique, vous pouvez coller ceci dans votre app.js par exemple :

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3001');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});

Remarque : Si vous devez modifier http://localhost:3001 pour correspondre au port que vous visitez dans le navigateur.

EDIT : OP n'utilise pas express, mais utilise Webpack. La question est : quelle est une solution agnostique à express ?

Réponse : La solution est toujours la même : quel que soit le serveur API que vous utilisez, il suffit de définir les en-têtes de réponse pour chaque réponse.

Il existe cependant une autre solution qui fait appel à Webpack :

Dans le package.json de votre code frontal qui est servi par webpack, ajoutez ce qui suit : "proxy" :"http://localhost:<port API server is running on>"

Par exemple, si webpack sert votre application frontale à localhost:3000 et votre serveur api fonctionne sur localhost:3001 alors le mandataire dans package.json serait :

"proxy":"http://localhost:3001"

Answer 2

Vous pouvez ajouter l'en-tête CORS dans la configuration du serveur de webpack dev comme suit :

headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': '*',
},

Cela ajoutera ces deux en-têtes dans votre réponse. Cela résoudra donc votre problème. Cependant, lorsque vos services fonctionnent sur un serveur différent de votre machine locale, ces en-têtes doivent être ajoutés dans la réponse du serveur.