web-dev-qa-db-fra.com

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin '...' n'est donc pas autorisé à accéder

J'utilise .htaccess pour réécrire les URL et j'ai utilisé les balises de base html afin de le faire fonctionner.

Maintenant, quand j'essaye de faire une requête ajax, j'obtiens l'erreur suivante:

XMLHttpRequest ne peut pas charger http://www.example.com/login.php. Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. L'origine 'http://example.com' n'est donc pas autorisée.

javascriptjqueryajaxcorsxmlhttprequest
134
Th3lmuu90

Utilisez addHeader Au lieu d'utiliser la méthode setHeader,

_response.addHeader("Access-Control-Allow-Origin", "*");
_

* dans la ligne ci-dessus permettra access to all domains.

Pour autoriser access to specific domain only:

_response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");
_

Vérifiez ceci blog post .

170
Jay Patel

Pourquoi l'erreur est déclenchée:

Le code JavaScript est limité par le règle de même origine , ce qui signifie qu'à partir d'une page située en www.example.com, vous ne pouvez effectuer que des requêtes (AJAX) vers des services situés à l'emplacement exactement le même domaine, dans ce cas, exactement www.example.com ( pas example.com - sans le www - ou whatever.example.com).

Dans votre cas, votre code Ajax tente d’atteindre un service dans http://wordicious.com à partir d’une page située sous http://www.wordicious.com.

Bien que très similaires, ils ne sont pas le même domaine. Et quand ils ne sont pas sur le même domaine, la demande ne sera acceptée que si la réponse de la cible contient un en-tête Access-Control-Allow-Origin.

Comme votre page/service sur http://wordicious.com n'a jamais été configuré pour présenter un tel en-tête, ce message d'erreur s'affiche.

Solution:

Comme dit, les domaines d'origine (où la page avec JavaScript est à) et les domaines cibles (où le JavaScript tente d'atteindre) doivent être les exact identiques .

Votre cas semble être une faute de frappe. On dirait que http://wordicious.com et http://www.wordicious.com sont en fait le même serveur/domaine. Donc, pour corriger cela, tapez la cible et l’origine de manière égale: affichez les pages/services de demande de code Ajax sur http://www.wordicious.com et non http://wordicious.com . (Vous pouvez éventuellement placer l'URL cible relativement, comme '/login.php', sans le domaine).



Sur une note plus générale:

Si le problème n’est pas une faute de frappe comme celle de cette question semble l’être, la solution serait d’ajouter le Access-Control-Allow-Origin au domaine cible Pour l'ajouter, cela dépend bien sûr du serveur/de la langue derrière cette adresse. Parfois, une variable de configuration dans l'outil fera l'affaire. D'autres fois, vous devrez ajouter vous-même les en-têtes dans le code.

145
acdcjunior

Pour .NET, le serveur peut configurer cela dans web.config comme indiqué ci-dessous

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Par exemple, disons, si le domaine du serveur est http://live.makemypublication.com et que le client est http://www.makemypublication.com , configurez-le dans le Web du serveur. .config comme ci-dessous

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>
61
Naga

Si vous recevez ce message d'erreur du navigateur:

Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origine '…' n'est donc pas autorisé à accéder

lorsque vous essayez de faire une demande Ajax POST/GET à un serveur distant hors de votre contrôle, oubliez ce simple correctif:

<?php header('Access-Control-Allow-Origin: *'); ?>

Ce que vous devez vraiment faire, surtout si vous utilisez uniquement JavaScript pour effectuer la requête Ajax, est un proxy interne qui prend votre requête et l'envoie au serveur distant.

Tout d'abord dans votre JavaScript, effectuez un appel Ajax sur votre propre serveur, à peu près comme:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Créez ensuite un simple fichier PHP appelé proxy.php pour envelopper vos données POST et les ajouter au serveur d'URL distant en tant que paramètres. Je vous donne un exemple de contournement de ce problème avec l’API de recherche d’hôtels Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

En faisant:

 echo json_encode(file_get_contents($url));

Vous faites juste la même requête mais côté serveur et après cela, cela devrait fonctionner correctement.

21
Nizar B.

Vous devez ajouter ceci au début de votre page php "login.php"

<?php header('Access-Control-Allow-Origin: *'); ?>
9
shady sherif

vous devez mettre les en-têtes clés/valeurs dans la réponse de la méthode des options. par exemple, si vous avez une ressource sur http://mydomain.com/myresource , dans votre code serveur, vous écrivez

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}
7
i-systech.com

La solution de contournement consiste à utiliser un proxy inverse s'exécutant sur votre hôte "source" et transféré vers votre serveur cible, tel que Fiddler:

Lien ici: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Ou un proxy inverse Apache ...

3
hzrari

En gros, modifiez la réponse de l'en-tête de l'API en ajoutant les paramètres supplémentaires suivants.

Informations de contrôle d'accès autorisées: true

Access-Control-Allow-Origin: *

Mais ce n’est pas une bonne solution en matière de sécurité

3
Piusha

Ajoutez ceci à votre fichier PHP ou à votre contrôleur principal

header("Access-Control-Allow-Origin: http://localhost:9000");
1
Sam

Résolu avec l'entrée ci-dessous dans httpd.conf

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_Origin:%{HTTP:Origin}]]
0
Sandeep540

Je rencontre ce problème lorsque j'utilise Angular pour enregistrer un enregistrement dans le système Django REST. Parfois, il n'y a pas de raison particulière à ce problème. Vérifiez attentivement le message d'erreur de votre Django, vous trouverez une solution.

0
Belter