Comment Access-Control-Allow-Origin-tête de travail?

Access-Control-Allow-Origin est un CORS (Cross-Origin Resource sharing) de la tête.

Lorsqu'Un Site tente d'extraire le contenu du Site B, le Site B peut envoyer un Access-Control-Allow-Origin en-tête de réponse de dire au navigateur que le contenu de cette page est accessible à certaines origines. (Un origine est un domaine, en plus d'un régime et le numéro de port.) Par défaut, le Site B de pages sont pas accessible à tout autre origine; à l'aide de la Access-Control-Allow-Origin en-tête ouvre une porte pour la croix-origine de l'accès par spécifiques demandant des origines.

Pour chaque ressource/page Site B veut rendre accessible à Un Site, le Site B, doit servir de ses pages avec l'en-tête de réponse:

Access-Control-Allow-Origin: http://siteA.com

Les navigateurs modernes ne va pas bloquer les demandes inter-domaine d'emblée. Si Un Site demande une page du Site B, le navigateur va effectivement chercher la page demandée au niveau du réseau et de vérifier si les en-têtes de réponse liste de Site Un en tant que demandeur de permis de domaine. Si le Site B n'a pas indiqué que le Site A est autorisé à accéder à cette page, le navigateur va déclencher l' XMLHttpRequest's error de l'événement et de refuser les données de réponse à la demande de code JavaScript.

Non de simples demandes

Ce qui se passe au niveau du réseau peut être légèrement plus complexe qu'expliqué ci-dessus. Si la demande est une "non simple" demande, le navigateur envoie d'abord des données moins "contrôle en amont" des OPTIONS de demande, pour vérifier que le serveur accepte la demande. Une demande est non simple lorsque l'un ou l'autre (ou les deux):

• à l'aide d'un verbe HTTP autres que GET ou POST (par exemple, PUT, DELETE)
• à l'aide de non-simple-têtes de la requête; le simple demande les en-têtes sont:
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (ce n'est simple lorsque sa valeur est application/x-www-form-urlencoded, multipart/form-data, ou text/plain)

Si le serveur répond aux OPTIONS de contrôle en amont avec appropriée en-têtes de réponse (Access-Control-Allow-Headers pour les non-têtes simples, Access-Control-Allow-Methods pour les non-simple des verbes) qui correspondent à la non-verbe simple et/ou non-des en-têtes simples, puis le navigateur envoie la demande réelle.

À supposer que le Site A veut envoyer une demande de /somePage, avec une non-simple Content-Type valeur de application/json, le navigateur d'abord envoyer une demande de contrôle en amont:

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Noter que Access-Control-Request-Method et Access-Control-Request-Headers sont ajoutés par le navigateur automatiquement; vous n'avez pas besoin de les ajouter. Cette option contrôle en amont obtient le succès des en-têtes de réponse:

Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Lors de l'envoi de la demande réelle (après contrôle en amont est fait), le comportement est identique à la façon dont une simple demande est traitée. En d'autres termes, un non-simple demande dont elle est réussie, est traité de la même façon comme une simple demande (c'est à dire, le serveur doit toujours envoyer Access-Control-Allow-Origin encore pour la réponse réelle).

Les navigateurs envoie la demande réelle:

PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json

{ "myRequestContent": "JSON is so great" }

Et le serveur renvoie un Access-Control-Allow-Origin, tout comme il le ferait pour une simple demande:

Access-Control-Allow-Origin: http://siteA.com

Voir La compréhension XMLHttpRequest au cours de la SCRO pour un peu plus d'informations à propos de la non-simple demande.

Question est un peu trop vieux pour répondre, mais je vous poste ça pour toute référence future à cette question.

Selon cette Mozilla Developer Network article,

Une ressource rend un de la croix-origine de la requête HTTP quand il demande une ressource à partir d'un autre domaine, ou le port que celui qui, la première ressource elle-même sert.

Un page HTML servi de http://domain-a.com fait une <img> src demande de http://domain-b.com/image.jpg.

De nombreuses pages sur le web aujourd'hui de charger des ressources telles que les feuilles de style CSS, images et scripts de domaines distincts (donc il doit être froid).

De Même Origine Politique

Pour des raisons de sécurité, les navigateurs restreindre cross-origin HTTP demandes initié de l'intérieur des scripts.

Par exemple, XMLHttpRequest et Fetch suivez les de même origine politique.

Ainsi, une application web à l'aide de XMLHttpRequest ou Fetch ne pouvait faire requêtes HTTP à son propre domaine.

Cross-Origin Resource sharing (SCRO)

Pour améliorer les applications web, les développeurs demandé aux fournisseurs de navigateur pour autoriser les requêtes inter-domaine.

La Cross-Origin Resource sharing (SCRO) mécanisme donne des serveurs web de la croix-domaine des contrôles d'accès, qui permet de sécuriser la croix-domaine des transferts de données.

Les navigateurs modernes utilisent de la SCRO dans un API conteneur - comme XMLHttpRequest ou Fetch - pour atténuer les risques de la croix-origine des requêtes HTTP.

Comment la SCRO œuvres (Access-Control-Allow-Origin en-tête)

Wikipédia:

De la SCRO norme décrit les nouveaux en-têtes HTTP qui fournissent des navigateurs et des serveurs de demander une Url distante seulement quand ils en ont l'autorisation.

Bien que certains de validation et d'autorisation peut être effectuée par le serveur, c'est généralement le navigateur responsabilité à l'appui de ces en-têtes et d'honorer les restrictions qu'ils imposent.

Exemple

1. Le navigateur envoie le OPTIONS demande avec un Origin HTTP en-tête.

   La valeur de cet en-tête est le domaine qui a servi en de la page parent. Lorsque une page de http://www.example.com tentatives d'accès à des données d'un utilisateur dans service.example.com, les suivantes en-tête de demande sera envoyé à service.example.com:

   Origine: http://www.example.com

2. Le serveur à service.example.com peut répondre:

   • Un Access-Control-Allow-Origin (ACAO) de la tête à sa réponse en indiquant quels sites d'origine sont autorisées.
     
     Par exemple:

     Access-Control-Allow-Origin: http://www.example.com

   • Une page d'erreur si le serveur n'autorise pas la croix-origine de la demande

   • Un Access-Control-Allow-Origin (ACAO) de la tête avec un joker qui permet à tous les domaines:

     Access-Control-Allow-Origin: *

À l'aide de Réagir et Axios, rejoignez proxy lien vers l'URL et ajouter un en-tête comme indiqué ci-dessous

https://cors-anywhere.herokuapp.com/ + Your API URL

Simplement en ajoutant l'Proxy lien fonctionnera, mais il peut aussi jeter erreur d'Aucun Accès à nouveau. Par conséquent préférable d'ajouter un en-tête comme indiqué ci-dessous.

axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => console.log(response:data);
  }

1. Un client télécharge le code javascript MyCode.js de http://siteA - l'origine.

Le code que le téléchargement - code html, balise de script ou xhr de javascript ou autre - est venu à partir de, disons, http://siteZ. Et, lorsque le navigateur demande MyCode.js il envoie une Origine: la tête en disant: "Origine: http://siteZ", car il peut voir ce que vous demandez à siteA et siteZ != siteA. (Vous ne pouvez pas arrêter ou interférer avec cela.)

2. L'en-tête de réponse de MyCode.js contient Access-Control-Allow-Origin: http://siteB, ce qui signifiait que je pensais MyCode.js été autorisé à faire de la croix-origine renvois vers le site B.

pas. Cela signifie, Seulement siteB est autorisé à faire cette demande. Si votre demande de MyCode.js à partir siteZ obtient une erreur au lieu de cela, et le navigateur généralement vous donne rien. Mais si vous faites votre serveur de retour A-C-A-O: siteZ au lieu de cela, vous aurez MyCode.js . Ou si il envoie '*', qui marche, qui va permettre à tout le monde en. Ou si le serveur envoie la chaîne de caractères à partir de l'Origine: en-tête... mais... pour la sécurité, si vous avez peur des pirates, votre serveur doit autoriser uniquement les origines sur une liste restreinte, qui sont autorisés à faire ces demandes.

Puis, MyCode.js vient de siteA. Quand il fait des demandes à siteB, ils sont tous de la croix-origine, le navigateur envoie Origine: siteA, et siteB a prendre le siteA, de reconnaître qu'il est sur la liste des admis aux demandeurs, et de la renvoyer A-C-A-O: siteA. Alors seulement, le navigateur laissez votre script obtenez le résultat de ces demandes.

Si vous utilisez PHP, essayez d'ajouter le code suivant au début du fichier php:

Si vous utilisez localhost, essayez ceci:

header("Access-Control-Allow-Origin: *");

Si vous utilisez des domaines externes tels que les serveur, essayez ceci:

header("Access-Control-Allow-Origin: http://www.website.com");

Pour l'origine de la croix de partage, de définir l'en-tête: 'Access-Control-Allow-Origin':'*';

Php: header('Access-Control-Allow-Origin':'*');

Nœud: app.use('Access-Control-Allow-Origin':'*');

Cela va permettre de partager des contenus de domaines différents.

L'Access-Control-Allow-Origin-tête de réponse indique si le
la réponse peut être partagé avec la demande de code à partir de la donnée d'origine.

Header type Response       header
Forbidden header name      no

Une réponse qui indique au navigateur pour permettre au code de toute origine
accéder à une ressource seront les suivantes:

Access-Control-Allow-Origin: *

Pour plus d'info, visitez ici....