Blocage de lecture cross-origin (CORB)


130

J'ai appelé une API tierce en utilisant Jquery AJAX. J'obtiens l'erreur suivante dans la console:

Cross-Origin Read Blocking (CORB) a bloqué la réponse cross-origin MY URL avec application / json de type MIME. Voir https://www.chromestatus.com/feature/5629709824032768 pour plus de détails.

J'ai utilisé le code suivant pour l'appel Ajax:

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

Lorsque j'ai vérifié Fiddler, j'ai obtenu les données en réponse mais pas dans la méthode de réussite Ajax.

Sil te plait aide moi.


3
Il semble que l'API que vous appelez n'ait pas activé les en-têtes requis pour autoriser les appels inter-domaines à partir de JS. Vous devrez probablement passer l'appel sur le serveur à la place. Êtes-vous sûr que la réponse est JSONP et non JSON? Notez également que les en-têtes que vous ajoutez dans la requête doivent à la place être placés dans la réponse du serveur.
Rory McCrossan

3
Avez-vous résolu cette erreur ou cet avertissement CORB? J'éprouve la même chose avec le module de demande.
Sherwin Ablaña Dapito

3
@ SherwinAblañaDapito si vous êtes toujours à la recherche d'une solution, voir ma réponse pour les environnements de développement / test
Colin Young

1
Pour montrer comment votre JS peut fonctionner correctement, vous pouvez démarrer Chrome en mode non sécurisé chrome.exe --user-data-dir = "C: / Chrome dev session" --disable-web-security But "Read Blocking (CORB) La réponse d'origine croisée bloquée " doit être corrigée côté serveur.
Ruslan Novikov

Réponses:


37
 dataType:'jsonp',

Vous effectuez une requête JSONP, mais le serveur répond avec JSON.

Le navigateur refuse d'essayer de traiter le JSON comme JSONP car ce serait un risque pour la sécurité. (Si le navigateur n'essayer de traiter le JSON comme JSONP il serait alors, au mieux, échec).

Consultez cette question pour plus de détails sur ce qu'est JSONP. Notez que c'est un mauvais hack pour contourner la politique de même origine qui était utilisée avant que CORS ne soit disponible. CORS est une solution beaucoup plus propre, plus sûre et plus puissante au problème.


Il semble que vous essayez de faire une demande d'origine croisée et que vous jetez tout ce à quoi vous pouvez penser dans une pile massive d'instructions contradictoires.

Vous devez comprendre le fonctionnement de la politique de même origine.

Consultez cette question pour un guide détaillé.


Maintenant, quelques notes sur votre code:

contentType: 'application/json',
  • Ceci est ignoré lorsque vous utilisez JSONP
  • Vous faites une demande GET. Il n'y a pas de corps de requête pour décrire le type de.
  • Cela rendra une demande d'origine croisée non simple, ce qui signifie qu'en plus des autorisations CORS de base, vous devez également gérer un pré-vol.

Supprimez ça.

 dataType:'jsonp',
  • Le serveur ne répond pas avec JSONP.

Enlève ça. (Vous pouvez faire en sorte que le serveur réponde avec JSONP à la place, mais CORS est meilleur).

responseType:'application/json',

Ce n'est pas une option prise en charge par jQuery.ajax. Enlève ça.

xhrFields: {withCredentials: false},

C'est la valeur par défaut. À moins que vous ne le définissiez sur true avec ajaxSetup, supprimez-le.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • Ce sont des en-têtes de réponse. Ils appartiennent à la réponse, pas à la demande.
  • Cela rendra une demande d'origine croisée non simple, ce qui signifie qu'en plus des autorisations CORS de base, vous devez également gérer un pré-vol.

20

Dans la plupart des cas, la réponse bloquée ne doit pas affecter le comportement de la page Web et le message d'erreur CORB peut être ignoré en toute sécurité. Par exemple, l'avertissement peut se produire dans les cas où le corps de la réponse bloquée était déjà vide, ou lorsque la réponse allait être livrée à un contexte qui ne peut pas la gérer (par exemple, un document HTML tel qu'une page d'erreur 404 être livré à une étiquette).

https://www.chromium.org/Home/chromium-security/corb-for-developers

J'ai dû nettoyer le cache de mon navigateur, je lisais dans ce lien, que, si la demande obtient une réponse vide, nous obtenons cette erreur d'avertissement. Je recevais du CORS à ma demande, et donc la réponse à cette demande est devenue vide, tout ce que j'avais à faire était de vider le cache du navigateur, et le CORS s'est enfui. Je recevais CORS parce que le chrome avait enregistré le numéro de PORT sur le cache, le serveur accepterait simplement localhost:3010et je le faisais localhost:3002, à cause du cache.


12

Renvoyez la réponse avec l'en-tête 'Access-Control-Allow-Origin: *' Vérifiez le code ci-dessous pour la réponse du serveur Php.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 

2
Votre réponse m'a tellement aidé !!! Je ne peux tout simplement pas vous remercier assez. Je vais continuer à rechercher ce que fait le "Contrôle d'accès Autoriser l'origine", donc je comprends les ramifications, mais j'apprends juste les bases de la création d'un service Web PHP et cela m'a aidé comme vous ne le croiriez pas. MERCI!!!
Adam Laurie

Cela ne résout pas du tout le problème. C'est une erreur CORB causée par l'envoi d'une réponse avec Content-Type: application/jsondedans. Le code de l'OP doit déjà le faire.
Quentin

1
@Quentin, ??? Le bon sens indique que tant que vous avez Autoriser l'origine, le navigateur autorisera la demande quel que soit l'en-tête / le corps suspect.
Pacerier le

7

Vous devez ajouter CORS côté serveur:

Si vous utilisez nodeJS, alors:

Vous devez d'abord installer cors en utilisant la commande ci-dessous:

npm install cors --save

Maintenant, ajoutez le code suivant au fichier de démarrage de votre application comme ( app.js or server.js)

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);

22
Si vous devez ajouter une extension pour résoudre votre problème, vous gérez mal la demande côté serveur. Juste une note.
Alexander Falk

2
Il est impossible de demander à ma base d'utilisateurs d'installer une étrange extension Chrome. Et les autres navigateurs?
Israel Rodriguez

2
Bien que cette réponse ne résout pas le problème à long terme, c'est en utilisant ce plugin qui a vérifié à mes collègues qu'il s'agissait d'un problème CORS. Alors voté pour ça!
KoldBane

2
@VladimirNul la réponse originale concernait une extension Chrome. Shubham l'a réécrit. Vérifiez l'historique s'il vous plaît.
Israel Rodriguez

3
Il y a une certaine confusion ici. Le PO fait référence à CORB et non à CORS.
Pas une machine

3

Ce n'est pas clair d'après la question, mais en supposant que cela se passe sur un client de développement ou de test, et étant donné que vous utilisez déjà Fiddler, vous pouvez demander à Fiddler de répondre avec une réponse d'autorisation:

  • Sélectionnez la demande de problème dans Fiddler
  • Ouvrez l' AutoResponderonglet
  • Cliquez Add Ruleet modifiez la règle pour:
    • Méthode: URL du serveur OPTIONS ici , par exempleMethod:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Vérifier Unmatched requests passthrough
  • Vérifier Enable Rules

Quelques remarques:

  1. Évidemment, ce n'est qu'une solution pour le développement / test où il n'est pas possible / pratique de modifier le service API
  2. Vérifiez que tous les accords que vous avez avec le fournisseur d'API tiers vous permettent de le faire
  3. Comme d'autres l'ont noté, cela fait partie du fonctionnement de CORS, et finalement l'en-tête devra être défini sur le serveur API. Si vous contrôlez ce serveur, vous pouvez définir vous-même les en-têtes. Dans ce cas, puisqu'il s'agit d'un service tiers, je ne peux que supposer qu'ils disposent d'un mécanisme par lequel vous pouvez leur fournir l'URL du site d'origine et qu'ils mettront à jour leur service en conséquence pour répondre avec les en-têtes corrects.


2

avez-vous essayé de changer le dataTypedans votre demande ajax de jsonpà json? cela l'a corrigé dans mon cas.


2

Dans une extension Chrome, vous pouvez utiliser

chrome.webRequest.onHeadersReceived.addListener

pour réécrire les en-têtes de réponse du serveur. Vous pouvez remplacer un en-tête existant ou ajouter un en-tête supplémentaire. C'est l'en-tête que vous voulez:

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived

J'étais coincé sur les problèmes CORB, et cela m'a résolu.


1
"À partir de Chrome 72, si vous devez modifier les réponses avant que le blocage de lecture d'origine croisée (CORB) ne puisse bloquer la réponse, vous devez spécifier 'extraHeaders' dans opt_extraInfpSpec." sur le webDemandes doc
swisswiss

0

Les en-têtes de réponse sont généralement définis sur le serveur. Réglez 'Access-Control-Allow-Headers'à 'Content-Type'côté du serveur


7
J'utilise une API tierce. Donc je ne peux pas faire ça. Veuillez me donner une solution côté client.
Jignesh

4
Le serveur décide ce qu'il faut autoriser et ce qu'il ne faut pas. Seul le serveur a cet accès. Le contrôle des en-têtes de réponse du côté client est un risque de sécurité. Le travail du côté client est d'envoyer une requête appropriée et ensuite d'obtenir la réponse envoyée par le serveur. Voir ceci: stackoverflow.com/questions/17989951/...
lifetimeLearner007

48
C'est CORB, pas CORS.
Joaquin Brandan

0

Cross-Origin Read Blocking (CORB), un algorithme par lequel les charges de ressources croisées douteuses peuvent être identifiées et bloquées par les navigateurs Web avant qu'ils n'atteignent la page Web. vers une page Web.

Assurez-vous d'abord que ces ressources sont servies avec un " Content-Type" correct , c'est-à-dire pour le type JSON MIME - " text/json", " application/json", le type HTML MIME - " text/html".

Deuxièmement: réglez le mode sur cors, c'est-à-dire mode:cors

La récupération ressemblerait à quelque chose comme ça

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
            }
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

références: https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

https://www.chromium.org/Home/chromium-security/corb-for-developers


0

Il y a un cas particulier qui mérite d'être mentionné dans ce contexte: Chrome (au moins certaines versions) vérifie les pré-éclairages CORS en utilisant l'algorithme mis en place pour CORB . OMI, c'est un peu idiot car les pré-éclairages ne semblent pas affecter le modèle de menace CORB, et CORB semble conçu pour être orthogonal à CORS. De plus, le corps d'un contrôle en amont CORS n'est pas accessible, il n'y a donc pas de conséquence négative juste un avertissement irritant.

Quoi qu'il en soit, vérifiez que vos réponses de contrôle en amont CORS (réponses de la méthode OPTIONS) n'ont pas de corps (204) . Un 200 vide avec le type de contenu application / octet-stream et la longueur zéro fonctionnait bien ici aussi.

Vous pouvez confirmer si c'est le cas que vous frappez en comptant les avertissements CORB par rapport aux réponses OPTIONS avec un corps de message.


0

Il semble que cet avertissement se soit produit lors de l'envoi d'une réponse vide avec un 200.

Cette configuration dans mon .htaccessaffichage de l'avertissement sur Chrome:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

Mais en changeant la dernière ligne en

RewriteRule .* / [R=204,L]

résoudre le problème!


-2

J'ai eu le même problème avec mon extension Chrome. Lorsque j'ai essayé d'ajouter à mon option manifeste "content_scripts" cette partie:

//{
    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

Et j'enlève l'autre partie de mes "permis" manifestes:

"https://*/"

Ce n'est que lorsque je le supprime que CORB sur l'une de mes demandes XHR disparaît.

Pire encore, il y a peu de demandes XHR dans mon code et un seul d'entre eux commence à obtenir une erreur CORB (pourquoi CORB n'apparaît pas sur d'autres XHR, je ne sais pas; pourquoi des changements manifestes ont causé cette erreur, je ne sais pas). C'est pourquoi j'ai inspecté tout le code encore et encore de quelques heures et j'ai perdu beaucoup de temps.


Un problème est survenu avec les en-têtes côté serveur. Je change ma valeur de retour ASP.NET en: public async Task <string> Get (string TM) La valeur de retour était il y a un instant JSON (type de contenu je suppose "application / json") et maintenant c'est l'autre (peut-être "texte /plaine"). Et ça aide. Maintenant, je retourne les "permissions" manifestes à "https: // * /" et cela fonctionne.
Олег Хитрень

-3

Si vous le faites en safari, cela ne prend pas de temps, activez simplement le menu développeur dans Préférences >> Confidentialité, et désélectionnez "Désactiver les restrictions d'origine croisée" dans le menu de développement. Si vous voulez uniquement local, il vous suffit d'activer le menu développeur et de sélectionner «Désactiver les restrictions de fichiers locaux» dans le menu de développement.

et dans Chrome pour OSX, ouvrez Terminal et exécutez:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir requis sur Chrome 49+ sous OSX

Pour Linux:

$ google-chrome --disable-web-security

De plus, si vous essayez d'accéder à des fichiers locaux à des fins de développement comme AJAX ou JSON, vous pouvez également utiliser cet indicateur.

-–allow-file-access-from-files

Pour Windows, allez dans l'invite de commande et allez dans le dossier où se trouve Chrome.exe et tapez

chrome.exe --disable-web-security

Cela devrait désactiver la même politique d'origine et vous permettre d'accéder aux fichiers locaux.


-3

J'ai rencontré ce problème car le format de la réponse jsonp du serveur est incorrect. La réponse incorrecte est la suivante.

callback(["apple", "peach"])

Le problème est que l'objet à l'intérieur callbackdoit être un objet json correct, au lieu d'un tableau json. J'ai donc modifié du code serveur et changé son format:

callback({"fruit": ["apple", "peach"]})

Le navigateur a accepté la réponse après la modification.


callback(["apple", "peach"])est parfaitement valide JSONP, et a bien fonctionné lorsque je l'ai testé à travers les origines.
Quentin

-4

Essayez d'installer l'extension "Moesif CORS" si vous rencontrez un problème dans Google Chrome. Comme il s'agit d'une demande d'origine croisée, Chrome n'accepte pas de réponse même lorsque le code d'état de la réponse est 200

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.