Firefox "Requête multi-origine bloquée" malgré les en-têtes

119

J'essaie de faire une simple demande d'origine croisée, et Firefox la bloque systématiquement avec cette erreur:

Requête inter-origine bloquée: la même politique d'origine interdit la lecture de la ressource distante à [url]. Cela peut être résolu en déplaçant la ressource vers le même domaine ou en activant CORS. [url]

Cela fonctionne bien dans Chrome et Safari.

Pour autant que je sache, j'ai défini tous les en-têtes corrects sur mon PHP pour permettre à cela de fonctionner. Voici ce avec quoi mon serveur répond

HTTP/1.1 200 OK
Date: Mon, 23 Jun 2014 17:15:20 GMT
Server: Apache/2.2.22 (Debian)
X-Powered-By: PHP/5.4.4-14+deb7u8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Request-Headers: X-Requested-With, accept, content-type
Vary: Accept-Encoding
Content-Length: 186
Content-Type: text/html

J'ai essayé d'utiliser Angular, jQuery et un objet XMLHTTPRequest de base, comme ceci:

var data = "id=1234"
var request = new XMLHttpRequest({mozSystem: true})
request.onload = onSuccess;
request.open('GET', 'https://myurl.com' + '?' + data, true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
request.send()

... et cela fonctionne dans tous les navigateurs sauf Firefox. Quelqu'un peut-il aider avec ça?

Godwhacker
la source
Pouvez-vous fournir une trace complète de toutes les demandes et réponses? Ou fournir au moins un site de test? Si le site Web accédant à l'origine distante http, https, fichier? mozSystemn'est pas pris en charge pour les sites Web réguliers, mais uniquement pour les applications firefox-os , alors supprimez cette option.
nmaier
1
@nmaier En-têtes lors de l'envoi en POST plutôt que GET: Accept application/json, text/plain, */* Accept-Encoding gzip, deflate Accept-Language en-US,en;q=0.5 Content-Length 35 Content-Type application/x-www-form-urlencoded; charset=UTF-8 Host [url] Origin [url] Referer [referrer url] User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0 Erreur: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url]. This can be fixed by moving the resource to the same domain or enabling CORS. [url]
Godwhacker
2
@nmaier En fait, il semble que ce soit une sorte de problème avec le certificat de sécurité sur le site auquel j'accède - Firefox donne juste une fausse erreur. Si j'ajoute le site à la liste des exceptions, cela fonctionne très bien.
Godwhacker

Réponses:

123

Il s'avère que cela n'a rien à voir avec CORS - c'était un problème avec le certificat de sécurité. Erreurs trompeuses = 4 heures de maux de tête.

Godwhacker
la source
3
Juste eu ce problème exact, l'erreur est trop générique et en plus de cela Chrome et Firefox utilisent différents magasins de certificats, il est donc plus difficile à déboguer. J'aurais dû me douter que lorsque mon proxy ne capturait aucune requête OPTIONS (il se cassait lors de la poignée de main SSL).
Daniel Correia
4
Godwhacker, je suis peut-être dans le même problème. Comment avez-vous découvert qu'il s'agissait du certificat de sécurité? Où pouvez-vous voir cela?
Leo
9
Dans mon cas, j'avais une application angulaire appelant un autre serveur, les deux utilisant des certificats signés en interne. Cependant, Firefox ne fait pas automatiquement confiance au cert car il n'est pas reconnu par une autorité publique. Je devais donc m'assurer que les certificats pour les deux serveurs étaient ajoutés comme exceptions dans Firefox avant que ce problème ne disparaisse.
Sam Storie
3
Pour moi, le correctif était de définir withCredentials=truesur l'instance XHR; sinon, Firefox n'a pas réussi à utiliser le certificat client lors de la demande (fonctionnait bien dans Chrome, cependant).
Clint Harris
1
Le commentaire de @SamStorie ressemble plus à une réponse qu'à cette réponse. Merci
Naga
27

Je suis tombé sur cette question après avoir trouvé que les demandes dans Firefox étaient bloquées avec le message:

Raison: la demande CORS a échoué

Après m'être arraché les cheveux, j'ai découvert qu'une extension Firefox nouvellement installée, Privacy Badger, bloquait les demandes.

Si vous arrivez à cette question après vous être gratté la tête, essayez de vérifier les extensions que vous avez installées pour voir si l'une d'entre elles bloque les demandes.

Voir Raison: la demande CORS n'a pas abouti sur MDN pour plus de détails.

Professeur de programmation
la source
comment avez-vous découvert quelle extension bloque les requêtes? J'ai le même problème, car la demande réussit dans un Firefox avec un nouveau profil (donc pas d'extensions)
Ciprian Tomoiagă
1
J'ai cliqué sur chaque extension pour voir s'il y avait des mentions de blocage de contenu pour le site particulier avec lequel j'avais un problème. Ghostery avait une entrée, j'ai donc marqué le site comme étant de confiance, rechargé la page et les demandes ont abouti.
Professeur de programmation
1
Je vous remercie! J'ai également découvert l'extension Project Insight qui donne un aperçu des autorisations de toutes les extensions. addons.mozilla.org/en-US/firefox/addon/project-insight
Ciprian Tomoiagă
1
@awendt Oof. Privacy Badger pour moi aussi. Merci.
Jason Leach le
26

J'ai trouvé que mon problème était que le serveur auquel j'ai envoyé la demande croisée avait un certificat qui n'était pas fiable.

Si vous souhaitez vous connecter à un domaine croisé avec https, vous devez d'abord ajouter une exception pour ce certificat.

Vous pouvez le faire en visitant le lien bloqué une fois et en ajoutant l'exception.

Cracker0dks
la source
5
Cela n'aide pas particulièrement quiconque visite votre site, à moins que vous ne soyez heureux d'y mettre un message disant `` Si vous utilisez Firefox, veuillez vous rendre sur ce site et l'ajouter à votre liste d'exceptions ''
Godwhacker
@ Cracker0dks "visitez le lien bloqué une fois et ajoutez l'exception" pourriez-vous préciser où ajouter l'exception? J'utilise Firefox Quantum. TIA
Paul
1
vous surfez sur le lien dont firefox se plaint directement. Ensuite, vous obtenez l'avertissement de certificat. Autorisez le certificat. Visitez à nouveau votre site principal.
Cracker0dks
13

Si vous n'avez pas de certificat `` réel '' (et que vous utilisez donc un certificat auto-signé), dans FireFox vous pouvez aller à:

Options > Privacy & Security > (scroll to the bottom) View Certificates > Add Exception.

Là, remplissez l'emplacement, par exemple: https: //wwww.myserver: myport

Hypénate
la source
cela a fonctionné pour moi lorsque mon CORS fonctionne dans tous les autres navigateurs à l'exception de Firefox avec l'erreur -> Cross-Origin Request Blocked: The Same Origin Policy interdit la lecture de la ressource distante sur localhost: 44304 / v1 / search . (Raison: la demande CORS n'a pas abouti).
JGilmartin le
5

Juste un mot d'avertissement. J'ai finalement contourné le problème avec Firefox et CORS.

La solution pour moi était ce post

Définition de CORS (partage de ressources cross-origin) sur Apache avec des en-têtes de réponse corrects permettant tout | Benjamin Horn

Cependant, Firefox se comportait vraiment, vraiment étrange après avoir défini ces en-têtes sur le serveur Apache (dans le dossier .htaccess).

J'ai ajouté beaucoup de console.log("Hi FF, you are here A")etc pour voir ce qui se passait.

Au début, on aurait dit qu'il était accroché xhr.send(). Mais ensuite, j'ai découvert qu'il n'était pas arrivé à cette déclaration. J'en ai placé un autre console.logjuste avant et je n'y suis pas arrivé - même s'il n'y avait rien entre le dernier console.loget le nouveau. Ça s'est juste arrêté entre deux console.log.

Réorganiser les lignes, supprimer, pour voir s'il y avait un caractère étrange dans le fichier. Je n'ai rien trouvé.

Le redémarrage de Firefox a résolu le problème.

Oui, je devrais signaler un bug. C'est juste que c'est si étrange alors je ne sais pas comment le reproduire.

AVIS : Et, oh, j'ai juste fait les Header always setparties, pas la Rewrite*partie!

Leo
la source
Même histoire pour moi aujourd'hui, essentiellement. Le redémarrage de Firefox l'a corrigé. Plus de 5 ans plus tard.
Søren Mortensen le
3

Il suffit d'ajouter

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

dans le .htaccessfichier à la racine du site Web auquel vous essayez de vous connecter.

Gareth
la source
C'est bien si vous voulez le configurer pour accepter les demandes de n'importe où; pas bien si vous ne le faites pas, qui est le point entier de l'en-tête.
Godwhacker
2

Pour la postérité, vérifiez également les journaux du serveur pour voir si la ressource demandée renvoie un 200.

J'ai rencontré un problème similaire, où tous les en-têtes appropriés étaient renvoyés dans la demande ajax de pré-vol, mais le navigateur a signalé que la demande réelle était bloquée en raison de mauvais en-têtes CORS.

Il s'avère que la page demandée renvoyait une erreur 500 en raison d'un code incorrect, mais uniquement lorsqu'elle a été récupérée via CORS. Le navigateur (Chrome et Firefox) a signalé par erreur que l'en-tête Access-Control-Allow-Origin était manquant au lieu de dire que la page avait renvoyé un 500.

Jack Stouffer
la source
1

Essayez ceci, cela devrait résoudre votre problème

  1. Dans votre config.php, ajoutez www pre dans votre domaine.com. Par exemple:

    HTTP define('HTTP_SERVER', 'http://domain name with www/');
    HTTPS define('HTTPS_SERVER', 'http://domain name with www/');
  2. Ajoutez ceci à votre fichier .htaccess

    RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [R=200,L]
Dharmendra Manikpuri
la source
1

Pour moi, il s'avère que je définissais l'en- Access-Control-Allow-Origintête de réponse sur un spécifique (et le correct), host.commais il a dû être retourné comme à la http://host.complace. Que fait Firefox? Il avale silencieusement la requête GET et renvoie un statut 0 au XHR, sans aucune sortie d'avertissement vers la console javascript, alors que pour d'autres échecs similaires, il dirait au moins quelque chose. Ai ai.

rogerdpack
la source
1
Il semble que le schéma soit attendu, en regardant les exemples sur w3.org/TR/cors mais de toute façon merci, je faisais la mauvaise chose aussi, et oui, le message d'erreur de Firefox manque.
Richard Green
1

Pour déboguer, vérifiez les journaux du serveur si possible. Firefox renvoie des erreurs CORS dans la console pour toute une série de raisons.

L'une des raisons est également le plugin uMatrix (et je suppose que NoScript et similaire).

johndodo
la source
0

J'ai rencontré un problème similaire, et je pense qu'il est valable d'être enregistré comment je l'ai résolu:

J'ai un système construit essentiellement sur Symfony 3. Pour des raisons d'auto-apprentissage et de performance, j'ai décidé d'écrire quelques scripts en utilisant GoLang, également, une API avec un accès public.

My Go API attend des paramètres de format Json et renvoie également une réponse au format Json

Pour appeler ces GoApi que j'utilise le plus, $ .ajax (jQuery) Le premier test était une tromperie: le (non) célèbre pop-up "Cross-Origin Request Blocked"! Ensuite, j'ai essayé de définir "Access-Control-Allow-Origin: *" sur apache conf, htaccess, php, javascript et partout où je pourrais trouver sur google!

Mais même erreur frustrante !!!

La solution était simple: je devais faire des requêtes "POST" au lieu de "GET".

Pour y parvenir, j'ai dû ajuster à la fois GoLang et JavaScript pour utiliser GET! Une fois que c'est fait, plus aucune demande Cross-Origin bloquée pour moi !!!

J'espère que ça aide

PS:

J'utilise apache et Vhost, sur le bloc d'annuaire que j'ai

  Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

N'oubliez pas: "*" signifie que vous accepterez les demandes de n'importe qui !!! (Ce qui peut être un manque de sécurité) Dans mon cas, ça va, car ce sera une API publique

PS2: Mes en-têtes

En-têtes de réponse

Access-Control-Allow-Credentials    true
Access-Control-Allow-Headers    Authorization
Access-Control-Allow-Methods    GET, POST, PUT
Access-Control-Allow-Origin http://localhost
Content-Length  164
Content-Type    application/json; charset=UTF-8
Date    Tue, 07 May 2019 20:33:52 GMT

Demander des en-têtes (469 B)

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection  keep-alive
Content-Length  81
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Host    localhost:9003
Origin  http://localhost
Referer http://localhost/fibootkt/MY_app_dev.php/MyTest/GoAPI
User-Agent  Mozilla/5.0 (Macintosh; Intel …) Gecko/20100101 Firefox/66.0
Diego Favero
la source
0

Si les réponses ci-dessus ne vous aident pas, vérifiez si le serveur backend est opérationnel ou non, car dans mon cas, le serveur s'est écrasé et cette erreur s'avère totalement trompeuse.

Neeraj Sewani
la source
0

Dans mon cas c'était mon ADBLOCKER ! Pour une raison quelconque, il a été activé sur mon hôte local et a provoqué cette erreur dans Firefox.

Le désactiver ou désinstaller le plugin devrait résoudre ce problème.

Dans votre cas, ce n'est peut-être pas un adblocker mais un autre plugin Firefox. Testez-le d'abord en mode incognito sans plugins pour déterminer si c'est le problème, puis désactivez systématiquement les plugins jusqu'à ce que vous trouviez le coupable.

Christian Heath
la source
-3

Les fichiers sont explicites. Créez un fichier, appelez-le comme vous le souhaitez. Dans mon cas, jq2.php.

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    // document is made ready so that the program starts when we load this page       
    $(document).ready(function(){

        // it tells that any key activity in the "subcat_search" filed will execute the query.
        $("#subcat_search").keyup(function(){

            // we assemble the get link for the direction to our engine "gs.php". 
            var link1 = "http://127.0.0.1/jqm/gs.php?needle=" + $("#subcat_search").val();

            $.ajax({
                url: link1,
                // ajax function is called sending the input string to "gs.php".
                success: function(result){
                    // result is stuffed in the label.
                    $("#search_val").html(result);
                }
            });
        })   

    });
</script>
</head>

<body>

<!-- the input field for search string -->
<input type="text" id="subcat_search">
<br>
<!-- the output field for stuffing the output. -->
<label id="search_val"></label>

</body>
</html>

Maintenant, nous allons inclure un moteur, créer un fichier, l'appeler comme vous le souhaitez. Dans mon cas, c'est gs.php.

$head = "https://maps.googleapis.com/maps/api/place/textsearch/json?query="; //our head
$key = "your key here"; //your key
$hay = $_GET['needle'];

$hay = str_replace(" ", "+", $hay); //replacing the " " with "+" to design it as per the google's requirement 
$kill = $head . $hay . "&key=" . $key; //assembling the string in proper way . 
print file_get_contents($kill);

J'ai essayé de garder l'exemple aussi simple que possible. Et comme il exécute le lien à chaque pression de touche, le quota de votre API sera consommé assez rapidement.

Bien sûr, il n'y a pas de fin à ce que nous pouvons faire, comme placer les données dans une table, envoyer à la base de données, etc.

Harsh Mehta
la source
Veuillez ne pas publier la même réponse plus d'une fois. Et assurez-vous que votre réponse répond réellement à la question. Si vous avez besoin de diriger quelqu'un ailleurs pour plus d'informations, ce n'est pas une bonne réponse.
elixenide
Bonjour, j'ai utilisé le lien car il contient plus d'informations telles que les prérequis, etc. Si vous pensez que c'est approprié, je vais le supprimer.
Harsh Mehta