Contrôle d'accès-Tête d'Origine de l'erreur à l'aide de Axios à Réagir Web jeter erreur dans google Chrome

Im faire un appel d'API à l'aide de Axios dans une Réagir Web app. Toutefois Im obtenir le message d'erreur dans google Chrome, comme,

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

    {
      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 aussi lu plusieurs réponses sur StackOverflow sur le même sujet, intitulé "Access-Control-Allow-Origin", mais encore coudnt comprendre comment résoudre ce problème. Je ne veux pas utiliser une extension de Chrome ou DE l'utilisation temporaire de hack pour résoudre ce problème. Veuillez indiquer le niveau moyen de résoudre le problème ci-dessus.

Après avoir essayé quelques réponses que j'ai essayé avec cette,

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

Maintenant, je reçois l'erreur,

Demande de champ d'en-tête Access-Control-Allow-Origin n'est pas autorisé par Access-Control-Allow-les en-Têtes de contrôle en amont de la réponse

  • Vérifiez le code de réponse HTTP de la réponse que vous obtenez. Êtes-vous d'obtenir un 200 OK il? Parce que quand je la regarde je vois un 503 “Service Indisponible”. Essayez de naviguer directement vers exemple.restdb.io/repos/maquette de données et je pense qu'au moins là, vous verrez la même chose. Donc il n'y a aucun moyen de votre demande est d'aller travailler si le serveur répond avec un 503. Je pense que la seule raison pour laquelle vous êtes l'obtention de la SCRO message d'erreur est simplement parce que de nombreux serveurs en général de ne pas envoyer de l'Access-Control-Allow-Origin dans 5xx réponses ou d'autres réponses. Ils ne l'envoyer avec succès les réponses (par exemple, 200 OK).
  • Ne pas ajouter de l'Access-Control-Allow-Origin à votre demande. Cet en-tête est strictement juste un en-tête de réponse pour les serveurs pour envoyer de nouveau à vous dans les réponses. Le seul effet de l'ajout à une demande de casser des choses. De même pour l'Access-Control-Allow-Méthodes d'en-tête. L'ajout de ceux de votre demande n'est pas toujours à empêcher le navigateur en cours d'exécution dans le premier message d'erreur cité dans la question.
InformationsquelleAutor SeaWarrior404 | 2017-08-31
  1. 10

    Si votre backend soutien de la SCRO, vous avez probablement besoin d'ajouter à votre demande de cet en-tête:

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

    [Mise à jour] Access-Control-Allow-Origin est un en-tête de réponse - afin de permettre aux SCRO - vous besoin d'ajouter cet en-tête de la réponse de votre serveur.

    Mais pour la plupart des cas, la meilleure solution serait de la configuration de la proxy inverse, de sorte que votre serveur serait en mesure de rediriger les requêtes provenant de l'interface backend, sans l'activation de la SCRO.

    Vous pouvez trouver de la documentation sur la SCRO mécanisme ici:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

    • J'ai ajouté il, "Access-Control-Allow-Origin' : '*', 'Access-Control-Allow-Méthodes' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS, mais j'ai l'erreur maintenant que "la Demande de champ d'en-tête Access-Control-Allow-Origin n'est pas autorisé par Access-Control-Allow-les en-Têtes de contrôle en amont de la réponse" Im en utilisant le restdb.io comme mon api point de fin.
    • avez-vous fait les paramètres de la SCRO, comme dans cet exemple? restdb.io/docs/apikeys-et-scro
    • "Access-Control-Allow-Origin" est-à-tête de réponse afin de l'ajouter à la demande n'a pas vraiment d'aucune utilité.
    • merci pour la correction moi, j'ai mis à jour la réponse.
    InformationsquelleAutor Vlad Povalii
  2. 2

    !!!
    J'ai eu un problème similaire et j'ai trouvé que dans mon cas, le withCredentials: true dans la requête a été l'activation de la SCRO vérifier alors que l'émission de la même dans l'en-tête de façon à éviter les vérifier:

    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials

    ne pas utiliser de
    withCredentials: true
    mais ensemble
    'Access-Control-Allow-Credentials':true
    dans les en-têtes

    • Expliquer pourquoi cela va résoudre le problème
    • j'espère que c'est plus clair maintenant, merci pour exiger l'explication
    • ne pas utiliser withCredentials: vrai résolu mon problème.. mais je n'ai pas mis " Access-Control-Allow-Diplômes:true dans req-tête.. au lieu de cela, j'ai ajouté ceci dans le web.config de serveur de côté et résolu le problème.
    InformationsquelleAutor AMDP
  3. 1

    À l'aide de l'Access-Control-Allow-Origin-tête de la demande ne sera pas vous aider dans ce cas, alors que cet en-tête peut être utilisé uniquement sur la réponse...

    Pour le faire fonctionner, vous devrez probablement ajouter cet en-tête pour votre réponse.Vous pouvez aussi essayer d'ajouter l'en-tête crossorigin:true à votre demande.

    • L'ajout de crossorigin:true à l'en-tête a fait le tour pour moi. Cheers
    InformationsquelleAutor Chuck-Durst
  4. 1

    Que je comprends le problème est que la demande est envoyée à partir de localhost:3000 à localhost:8080 et le navigateur rejette les demandes de la SCRO. Donc la solution était de créer proxy

    Ma solution a été :

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

    En node js(backend), ajoutez ces lignes à soutenir Access-Control-Allow-Origin,

    const express = require('express')
const app = express()
app.use(cors())
    InformationsquelleAutor Parthasarathy S