web-dev-qa-db-fra.com

Blocage de lecture d'origine croisée (CORB)

J'ai appelé une API tierce à l'aide de Jquery AJAX. Je reçois l'erreur suivante dans la console:

Le blocage de la lecture de l'origine croisée (CORB) a bloqué la réponse d'origine croisée MY URL avec le type MIME application/json. 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é dans Fiddler, j'ai reçu les données en réponse mais pas dans la méthode de succès Ajax.

Sil te plait aide moi.

javascriptjqueryajaxcorscross-origin-read-blocking
34
Jignesh

Dans la plupart des cas, la réponse bloquée ne devrait 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 lorsque le corps de la réponse bloquée était déjà vide ou lorsque la réponse devait être remise à un contexte qui ne peut pas le gérer (par exemple, un document HTML tel qu'une page d'erreur 404). être remis à une étiquette).

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

Je devais nettoyer le cache de mon navigateur, je lisais dans ce lien que, si la requête obtenait une réponse vide, nous obtenions cette erreur d'avertissement. Je recevais des CORS à ma demande et la réponse à cette demande est donc devenue vide. Tout ce que je devais faire, c'était vider le cache du navigateur, et la CORS s'est échappée. Je recevais CORS parce que Chrome avait enregistré le numéro de PORT sur le cache. Le serveur n'accepterait que localhost:3010 et je le faisais localhost:3002, à cause du cache.

10
Marcelo Rafael

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

3
Cla

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

3
lifetimeLearner007

La question ne le dit pas clairement, mais en supposant que cela se produise sur un client de développement ou de test, et étant donné que vous utilisez déjà Fiddler, vous pouvez lui demander de répondre avec une permission:

  • Sélectionnez la demande de problème dans Fiddler
  • Ouvrez l'onglet AutoResponder
  • Cliquez sur Add Rule et modifiez la règle en:
    • Méthode: OPTIONS URL du serveur ici , par exemple. Method:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Vérifier Unmatched requests passthrough
  • Vérifier Enable Rules

Quelques notes:

  1. Évidemment, il ne s'agit que d'une solution de 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 conclus 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 l'en-tête devra éventuellement être défini sur le serveur d'API. Si vous contrôlez ce serveur, vous pouvez définir vous-même les en-têtes. Dans ce cas, étant donné qu’il s’agit d’un service tiers, je ne peux que supposer qu’ils disposent d’un mécanisme permettant de 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 appropriés.
2
Colin Young

Vous devez ajouter CORS côté serveur: _

Si vous utilisez nodeJS alors:

D'abord, vous devez installercors en utilisant la commande ci-dessous:

npm install cors --save

Maintenant, ajoutez le code suivant à votre fichier de démarrage d'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);
1
Shubham Verma
 dataType:'jsonp',

Vous faites une demande JSONP, mais le serveur répond avec JSON.

Le navigateur refuse de traiter le JSON en tant que JSONP car cela présenterait un risque pour la sécurité. (Si le navigateur a essayé de traiter le JSON en tant que JSONP, il échouerait au mieux).

Voir cette question pour plus de détails sur JSONP. Notez que c’est un mauvais moyen de contourner la règle de la même origine qui était utilisée avant la disponibilité de la SCRO. CORS est une solution beaucoup plus propre, plus sûre et plus puissante au problème.

On dirait que vous essayez de faire une demande d’origine croisée et que vous jetez tout ce que vous pouvez en penser dans une pile d'instructions contradictoires.

Vous devez comprendre comment fonctionne la stratégie Même origine. 

Voir 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 que, outre les autorisations de base CORS, vous devez également gérer un contrôle préalable.

Enlevez ç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, mais CORS est préférable).

responseType:'application/json',

Ce n'est pas une option supportée par jQuery.ajax. Enlève ça.

xhrFields: { withCredentials: false},

C'est la valeur par défaut. A 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 que, outre les autorisations de base CORS, vous devez également gérer un contrôle préalable.
1
Quentin

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

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

1
pmiranda

Dans ce contexte, il convient de mentionner un cas Edge: Chrome (certaines versions, au moins) vérifie les preflights CORS à l'aide de l'algorithme configuré pour CORB. OMI, c'est un peu ridicule parce que les preflights ne semblent pas affecter le modèle de menace CORB, et CORB semble conçu pour être orthogonal à CORS. En outre, le corps d'un contrôle en amont de la SCRO n'est pas accessible, il n'y a donc pas de conséquence négative, mais juste un avertissement irritant.

Quoi qu'il en soit, vérifiez que vos réponses de contrôle en amont CORS (réponses de 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 a bien fonctionné ici aussi.

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

0
Simon Thum

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

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

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

Et j'enlève l'autre partie de mon manifeste "permissons":

"https://*/"

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

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

0
Олег Хитрень

J'utilise un serveur Apache et j'ai ajouté le Header's suivant à ma VirtualHost 's Directory

    <Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
            Header add Access-Control-Allow-Origin "*"
            Header add Access-Control-Allow-Methods "GET"
            Header add Access-Control-Allow-Headers "application/json"
    </Directory>
0
Jacksonkr

Le blocage en lecture entre origines (CORB), est un algorithme permettant au navigateur Web d'identifier et de bloquer les charges de ressources douteuses d'origine croisée avant d'atteindre la page Web. Il est conçu pour empêcher le navigateur de fournir certaines réponses réseau croisées. à une page Web.

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

Deuxième étape: définissez le mode sur cors i.e, mode:cors

Le fetch 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
Nikil Munireddy