web-dev-qa-db-fra.com

Erreur d'en-tête d'origine de contrôle d'accès à l'aide d'Axios dans une erreur de lancement de React Web dans Chrome

Je fais un appel API en utilisant Axios dans une application Web React. Cependant, j'obtiens l'erreur dans Chrome en tant que,

XMLHttpRequest ne peut pas charger https://example.restdb.io/rest/mock-data . Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 8080 ' n'est donc pas autorisé.

    {
      axios.get('https://example.restdb.io/rest/mock-data', {
      headers: { 
      'x-apikey': 'API_KEY',
      },
    responseType: 'json',
     }).then(response => {
      this.setState({ tableData: response.data });
    });
    }

J'ai également lu plusieurs réponses sur StackOverflow à propos du même problème, intitulé "Access-Control-Allow-Origin" mais je ne sais toujours pas comment résoudre ce problème. Je ne veux pas utiliser une extension dans Chrome ou utiliser un piratage temporaire pour résoudre ce problème. Veuillez suggérer le moyen standard de résoudre le problème ci-dessus.

Après avoir essayé quelques réponses, j'ai essayé avec ça,

    headers: { 
      'x-apikey': '59a7ad19f5a9fa0808f11931',
      'Access-Control-Allow-Origin' : '*',
      'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    },

Maintenant, je reçois l'erreur comme,

Le champ d'en-tête de demande Access-Control-Allow-Origin n'est pas autorisé par Access-Control-Allow-Headers dans la réponse de contrôle en amont

javascriptrestreactjsgoogle-chromeaxios
10
SeaWarrior404

Si votre backend supporte CORS, vous devrez probablement ajouter à votre requête cet en-tête:

headers: {"Access-Control-Allow-Origin": "*"}

Sinon, vous devez vous assurer que le serveur peut gérer les demandes CORS.

Vous trouverez la documentation sur ce mécanisme ici: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

6
Vlad Povalii

Si j'ai bien compris, le problème est que la demande est envoyée de localhost: 3000 à localhost: 8080 et que le navigateur refuse les demandes telles que CORS. Donc, la solution était de créer un proxy 

Ma solution était:

import proxy from 'http-proxy-middleware'
app.use('/api/**', proxy({ target: "http://localhost:8080" }));
0
LvDevR1

L'utilisation de l'en-tête Access-Control-Allow-Origin à la demande ne vous aidera pas dans ce cas, car cet en-tête ne peut être utilisé que sur la réponse ...

Pour que cela fonctionne, vous devriez probablement ajouter cet en-tête à votre réponse. Vous pouvez également essayer d'ajouter l'en-tête crossorigin:true à votre demande.

0
Chuck-Durst