Blocage de lecture cross-origin (CORB)

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.

 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.

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.

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); 

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);

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.

Si vous travaillez sur localhost, essayez ceci, celui-ci est la seule extension et méthode qui a fonctionné pour moi (Angular, uniquement javascript, pas de php)

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=fr

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

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.

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

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

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.

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!

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.

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.

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.

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