web-dev-qa-db-fra.com

La demande de la SCRO ne fonctionne pas dans Safari

Je fais une demande xhr CORS. Cela fonctionne très bien en chrome, mais lorsque je lance Safari, le message «Impossible de charger ---- l'accès n'est pas autorisé par Access-control-allow-Origin». Le code est exactement le même et j'ai mis le CORS sur le serveur. Ci-dessous, mon code. (Possède un contrôle d'accès, mais vous êtes libre d'essayer sans accessToken)

 var water;
 var req = new XMLHttpRequest;
 req.overrideMimeType("application/json");
 req.open('GET', 'https://storage.googleapis.com/fflog/135172watersupplies_json', true);
 req.setRequestHeader('Authorization', 'Bearer ' + accessToken);
 origThis = this;
 var target = this;
 req.onload = function() {
 water = req;

 req.send(null);

Après avoir examiné les en-têtes de requête, je constate qu'une requête OPTIONS est effectuée en premier et que cette requête n'est pas autorisée. L'en-tête Origin n'est pas inclus dans la réponse dans Safari, mais en chrome. Qu'est-ce qui causerait ça? Toute aide serait grandement appréciée.

UPDATE: J'ai essayé Safari pour Windows et ça marche, donc je ne suis pas sûr de ce qui se passe ici. Le Mac que j'utilise est un accès à distance (Macincloud.com), mais je ne pense pas que cela y soit pour quelque chose.

javascriptsafarixmlhttprequestcors
40
Patrick

Merci pour toutes les réponses, je l’ai enfin moi-même. J'ai ajouté 'Origin' à mon ResponseHeaders et fonctionne bien maintenant.

3
Patrick

J'ai rencontré la même erreur lors d'une requête XHR sur un fichier dans Amazon S3. Sur Safari 7, il échouait. Je sais que vous n'utilisez pas Amazon S3, mais je pensais poster si cette solution aidait les autres.

Le problème était que Safari 7 avait défini l'en-tête "Control-Request-Request-Headers" sur "Origine, avec-demandé-avec", mais ma configuration AWS CORS n'autorisait que "x-demandé-avec":

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>x-requested-with</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

J'ai ajouté "Origin" comme en-tête autorisé et tout a bien fonctionné.

        <AllowedHeader>Origin</AllowedHeader>

Remarque : AllowedOrigin of * sert uniquement à des fins de développement. Voir commentaire @andes ci-dessous pour plus d'informations.

42
Seth

Je viens d'avoir un problème similaire, erreur CORS. Cela fonctionnerait dans Firefox et Chrome mais pas dans Safari 10. 

Il s'est avéré que nous devions mettre la barre oblique finale sur l'URL JSON.

4
William Macdonald

Pour une demande CORS, vous devriez utiliser votre code d'origine fflog.storage.googleapis.com. Si vous utilisez storage.googleapis.com Origin, tous les sites peuvent accéder à votre compartiment. 

ai essayé essayez de supprimer overrideMimeType? Si vous définissez le type mime, il retournera correctement.

J'ai également un problème avec la requête Safari POST, mais je n'ai pas encore de réponse. GET est OK. 

0
Kyaw Tun

essayez de supprimer le type mime prioritaire.

 var
 jsonhandler=function(){var req=JSON.parse(this.response);console.log(req)},
 req=new XMLHttpRequest;
 req.open('GET','https://storage.googleapis.com/fflog/135172watersupplies_json');
 req.setRequestHeader('Authorization','Bearer '+accessToken);
 req.onload=jsonhandler;
 req.send();
0
cocco

Quand j'essaye

curl -v -X OPTIONS \
  -H 'Origin: fflog.storage.googleapis.com' \
  -H 'Access-Control-Request-Method: GET'  \
  https://storage.googleapis.com/fflog/135172watersupplies_json

Je reçois, entre autres en-têtes:

Access-Control-Allow-Origin: *

Lorsque j'exécute des requêtes AJAX par rapport à https://storage.googleapis.com/fflog/135172watersupplies_json à partir de Safari 6.0.4 sous Mac OS 10.8.3, j'obtiens des erreurs 403, mais elles s'exécutent toutes. 

Je ne peux donc que supposer que vous essayez d’envoyer une demande avec des informations d’identification pour laquelle un caractère générique Access-Control-Allow-Origin n’est pas autorisé.

0
Old Pro

Quant à Amazon S3, cela ne fonctionnait que dans safari après avoir ajouté plus d’en-têtes autorisés, Content-Type et Range. L'un d'entre eux a fait le travail.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
        <AllowedHeader>X-Requested-With</AllowedHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>Range</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
0
Edhowler

J'ai eu le même problème où CORS travaillait dans Chrome, mais jeta une erreur Origin dans Safari. Il s'est avéré qu'il s'agissait d'un problème d'autorisation Kerberos. Lorsque j'ai chargé l'URL XHR directement dans Safari, des informations d'identification m'ont été demandées. Après les avoir saisies, je suis retourné au site d'origine et Safari n'avait plus l'erreur CORS.

0
Seth Moore

Dans mon cas, il s'agissait d'un problème pour l'en-tête Accept-Langauge. J'ai ajouté Accept-Language à l'intérieur de Access-Control-Allow-Headers et le problème a été résolu. 

0
deen

Lorsque j'interroge votre URL, je récupère les en-têtes suivants: Access-Control :

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Authorization, Cache-Control, Content-Length, Date, Expires, Server, Transfer-Encoding, x-goog-meta-foo1

Je soupçonne que cela a quelque chose à voir avec vos en-têtes Access-Control: vous oubliez quelque chose ou vous êtes trop spécifique.

Étant donné que vous envoyez un en-tête personnalisé, vous voudrez peut-être essayer:

Access-Control-Allow-Headers: *

Vous pouvez également voir si le fait de laisser Access-Control-Expose-Headers fait une différence.

Au-delà, il serait utile de voir les en-têtes de requête/réponse réels.

0
Luke