web-dev-qa-db-fra.com

Continuez à obtenir aucune erreur «Access-Control-Allow-Origin» avec XMLHttpRequest

J'aurais résolu ce problème en utilisant jQuery $.ajax fonction mais dans ce cas jQuery n'est pas une option. Au lieu de cela, je vais avec la demande CORS. Je pense qu'il y a quelque chose qui ne va pas avec le serveur Web qui répond à la demande et j'ai du mal à comprendre quel est le problème.

Voici mon code pour créer la requête CORS

var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');
httpRequest.setRequestHeader( 'Content-Type', 'application/json' );
httpRequest.onerror = function(XMLHttpRequest, textStatus, errorThrown) {
  console.log( 'The data failed to load :(' );
  console.log(JSON.stringify(XMLHttpRequest));
};
httpRequest.onload = function() {
  console.log('SUCCESS!');
}

Voici l'erreur console.log:

XMLHttpRequest ne peut pas se charger http://test.testhost.com/testpage . Le champ d'en-tête de demande Access-Control-Allow-Origin n'est pas autorisé par Access-Control-Allow-Headers.

Voici les informations d'en-tête:

> Remote Address:**.**.***.**:80 Request
> URL:http://test.testdomain.com/testpage Request
> Request Method:OPTIONS
> Status Code:200 OK

En-têtes de demande: 

OPTIONS /content-network HTTP/1.1
Host: test.testhost.com
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: POST
Origin: http://test.testdomain.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Access-Control-Request-Headers: access-control-allow-Origin, content-type
Accept: */*
Referer: http://test.testdomain.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

En-têtes de réponse: 

HTTP/1.1 200 OK
Date: Thu, 14 Aug 2014 20:17:25 GMT
Server: Apache
Last-Modified: Thu, 14 Aug 2014 20:17:25 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1408047445"
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Vary: Accept-Encoding
Content-Encoding: gzip
Access-Control-Allow-Headers: Origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Content-Length: 6117
Connection: close
Content-Type: text/html; charset=utf-8
javascriptxmlhttprequestcorsresponse
13
CR47

La réponse de votre serveur permet à la demande d'inclure trois en-têtes non simples spécifiques :

Access-Control-Allow-Headers:Origin, x-requested-with, content-type

mais votre demande a un en-tête non autorisé par la réponse du serveur:

Access-Control-Request-Headers:access-control-allow-Origin, content-type

Tous les en-têtes non simples envoyés dans une demande CORS doivent être explicitement autorisés par le Access-Control-Allow-Headers en-tête de réponse. L'inutile Access-Control-Allow-Origin l'en-tête envoyé dans votre demande n'est pas autorisé par la réponse CORS du serveur. C'est exactement ce que le "... non autorisé par Access-Control-Allow-Headers "Le message d'erreur essayait de vous le dire.

Il n'y a aucune raison pour que la demande ait cet en-tête: elle ne fait rien, car Access-Control-Allow-Origin est un en-tête réponse, pas un en-tête de requête.

Solution : supprimez l'appel setRequestHeader qui ajoute un Access-Control-Allow-Origin en-tête de votre demande.

14
apsillers

Retirer:

httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');

... et ajouter:

httpRequest.withCredentials = false;
3
Max

En plus de votre problème CORS, le serveur auquel vous essayez d'accéder a authentification de base HTTP activé. Vous pouvez inclure des informations d'identification dans votre demande interdomaine en spécifiant les informations d'identification dans l'URL que vous transmettez au XHR:

url = 'http://username:[email protected]/testpage'
0
Mark Ignacio