Ursprungsübergreifende Leseblockierung (CORB)

130

Ich habe die Drittanbieter-API mit Jquery AJAX aufgerufen. Ich erhalte folgenden Fehler in der Konsole:

Cross-Origin Read Blocking (CORB) blockierte die Cross-Origin-Antwort MY URL mit MIME-Typ application / json. Weitere Informationen finden Sie unter https://www.chromestatus.com/feature/5629709824032768 .

Ich habe folgenden Code für den Ajax-Aufruf verwendet:

$.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....=================");
  }
});

Beim Einchecken in Fiddler habe ich die Daten als Antwort erhalten, jedoch nicht in der Ajax-Erfolgsmethode.

Bitte hilf mir.

Jignesh
quelle
3
Es sieht so aus, als ob die von Ihnen aufgerufene API die für domänenübergreifende Aufrufe von JS erforderlichen Header nicht aktiviert hat. Sie müssen den Anruf höchstwahrscheinlich stattdessen auf dem Server tätigen. Sind Sie sicher, dass die Antwort JSONP und nicht einfaches JSON ist? Beachten Sie auch, dass die Header, die Sie der Anforderung hinzufügen, stattdessen in der Antwort vom Server platziert werden müssen.
Rory McCrossan
3
Haben Sie diesen CORB-Fehler oder diese Warnung behoben? Ich erlebe dasselbe mit dem Anforderungsmodul.
Sherwin Ablaña Dapito
3
@ SherwinAblañaDapito Wenn Sie noch nach einer Lösung suchen, sehen Sie meine Antwort für Entwicklungs- / Testumgebungen
Colin Young
1
Um zu demonstrieren, wie Ihr JS ordnungsgemäß funktioniert, können Sie Chrome in einem unsicheren Modus starten. Chrome.exe --user-data-dir = "C: / Chrome-Entwicklersitzung" --disable-web-security But "Read Blocking (CORB) blockierte Cross-Origin-Antwort " muss auf der Serverseite behoben werden.
Ruslan Novikov

Antworten:

37
 dataType:'jsonp',

Sie stellen eine JSONP-Anfrage, aber der Server antwortet mit JSON.

Der Browser weigert sich, den JSON als JSONP zu behandeln, da dies ein Sicherheitsrisiko darstellen würde. (Wenn der Browser hat die JSON als JSONP zu behandeln versucht , dann wäre es allenfalls gescheitert).

In dieser Frage finden Sie weitere Informationen zu JSONP. Beachten Sie, dass dies ein böser Hack ist, um die Same Origin-Richtlinie zu umgehen, die verwendet wurde, bevor CORS verfügbar war. CORS ist eine viel sauberere, sicherere und leistungsfähigere Lösung für das Problem.


Es sieht so aus, als würden Sie versuchen, eine Cross-Origin-Anfrage zu stellen, und alles, was Sie sich vorstellen können, in einem riesigen Stapel widersprüchlicher Anweisungen darauf werfen.

Sie müssen verstehen, wie die Richtlinie für denselben Ursprung funktioniert.

In dieser Frage finden Sie eine ausführliche Anleitung.


Nun ein paar Anmerkungen zu Ihrem Code:

contentType: 'application/json',
  • Dies wird ignoriert, wenn Sie JSONP verwenden
  • Sie stellen eine GET-Anfrage. Es gibt keinen Anforderungshauptteil, der den Typ von beschreibt.
  • Dies macht eine Cross-Origin-Anfrage nicht einfach, was bedeutet, dass Sie sich neben den grundlegenden CORS-Berechtigungen auch mit einem Vorflug befassen müssen.

Entfernen Sie das.

 dataType:'jsonp',
  • Der Server antwortet nicht mit JSONP.

Entferne das. (Sie könnten den Server stattdessen mit JSONP antworten lassen, aber CORS ist besser).

responseType:'application/json',

Dies ist keine von jQuery.ajax unterstützte Option. Entferne das.

xhrFields: {withCredentials: false},

Dies ist die Standardeinstellung. Entfernen Sie dies, es sei denn, Sie setzen es mit ajaxSetup auf true.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • Dies sind Antwortheader. Sie gehören zur Antwort, nicht zur Anfrage.
  • Dies macht eine Cross-Origin-Anfrage nicht einfach, was bedeutet, dass Sie sich neben den grundlegenden CORS-Berechtigungen auch mit einem Vorflug befassen müssen.
QUentin
quelle
20

In den meisten Fällen sollte die blockierte Antwort das Verhalten der Webseite nicht beeinflussen, und die CORB-Fehlermeldung kann ignoriert werden. Beispielsweise kann die Warnung in Fällen auftreten, in denen der Text der blockierten Antwort bereits leer war oder in denen die Antwort an einen Kontext gesendet werden sollte, der sie nicht verarbeiten kann (z. B. ein HTML-Dokument wie eine 404-Fehlerseite) an ein Tag geliefert werden).

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

Ich musste den Cache meines Browsers bereinigen. Ich habe in diesem Link gelesen, dass wir diesen Warnfehler erhalten, wenn die Anfrage eine leere Antwort erhält. Ich habe einige CORS auf meine Anfrage bekommen, und so wurde die Antwort auf diese Anfrage leer. Alles, was ich tun musste, war den Cache des Browsers zu leeren, und die CORS entkam. Ich erhielt CORS, weil das Chrome die PORT-Nummer im Cache gespeichert hatte. Der Server akzeptierte dies nur localhost:3010und ich tat es localhost:3002aufgrund des Caches.

Alex
quelle
12

Antwort mit Header 'Access-Control-Allow-Origin: *' zurückgeben Überprüfen Sie den folgenden Code für die Antwort des PHP-Servers.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 
Jestin
quelle
2
Ihre Antwort hat mir so sehr geholfen !!! Ich kann dir einfach nicht genug danken. Ich werde weiterhin untersuchen, was "Access Control Allow Origin" bewirkt, damit ich die Auswirkungen verstehe, aber ich lerne gerade die Grundlagen der Erstellung eines PHP-Webdienstes und dies hat mir geholfen, als würden Sie es nicht glauben. DANKE!!!
Adam Laurie
Dies behebt das Problem überhaupt nicht. Es ist ein CORB-Fehler, der durch das Senden einer Antwort mit Content-Type: application/jsondarin verursacht wird. Der OP-Code muss dies bereits tun.
Quentin
1
@QUentin, ??? Der gesunde Menschenverstand gibt an, dass der Browser die Anforderung unabhängig von verdächtigen Headern / Körpern zulässt, solange Sie Origin zulassen zulassen.
Pacerier
7

Sie müssen CORS auf der Serverseite hinzufügen:

Wenn Sie nodeJS verwenden, dann:

Zuerst müssen Sie mit dem folgenden Befehl installieren cors :

npm install cors --save

Fügen Sie nun den folgenden Code zu Ihrer App-Startdatei hinzu, z. B. ( 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);
Shubham Verma
quelle
22
Wenn Sie eine Erweiterung hinzufügen müssen, um Ihr Problem zu beheben, wird die Anforderung auf der Serverseite falsch verarbeitet. Nur eine Notiz.
Alexander Falk
2
Es ist nicht möglich zu fragen, ob meine Benutzerbasis eine seltsame Chrome-Erweiterung installiert. Was ist mit anderen Browsern?
Israel Rodriguez
2
Obwohl diese Antwort das Problem nicht langfristig löst, hat sie dieses Plugin verwendet, das meinen Mitarbeitern bestätigt hat, dass es sich um ein CORS-Problem handelt. Also dafür hochgestimmt!
KoldBane
2
@VladimirNul Die ursprüngliche Antwort war über eine Chrome-Erweiterung. Shubham hat es umgeschrieben. Überprüfen Sie bitte die Geschichte.
Israel Rodriguez
3
Hier gibt es einige Verwirrung. Das OP bezieht sich auf CORB und nicht auf CORS.
Keine Maschine
3

Aus der Frage geht nicht hervor, aber vorausgesetzt, dass dies auf einem Entwicklungs- oder Testclient geschieht, und wenn Sie Fiddler bereits verwenden, können Sie Fiddler mit einer zulässigen Antwort antworten lassen:

  • Wählen Sie die Problemanforderung in Fiddler aus
  • Öffnen Sie die AutoResponderRegisterkarte
  • Klicken Sie auf Add Ruleund bearbeiten Sie die Regel, um:
    • Methode: OPTIONS Server URL hier , zBMethod:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Prüfen Unmatched requests passthrough
  • Prüfen Enable Rules

Ein paar Anmerkungen:

  1. Offensichtlich ist dies nur eine Lösung für Entwicklung / Test, bei der es nicht möglich / praktisch ist, den API-Service zu ändern
  2. Überprüfen Sie, ob alle Vereinbarungen, die Sie mit dem Drittanbieter-API-Anbieter getroffen haben, dies ermöglichen
  3. Wie andere angemerkt haben, ist dies ein Teil der Funktionsweise von CORS, und schließlich muss der Header auf dem API-Server festgelegt werden. Wenn Sie diesen Server steuern, können Sie die Header selbst festlegen. In diesem Fall kann ich, da es sich um einen Drittanbieter-Service handelt, nur davon ausgehen, dass sie über einen Mechanismus verfügen, über den Sie ihnen die URL der ursprünglichen Site bereitstellen können, und dass sie ihren Service entsprechend aktualisieren, um mit den richtigen Headern zu antworten.
Colin Young
quelle
2

Haben Sie versucht, die dataTypein Ihrer Ajax-Anfrage von auf jsonpzu ändern json? das hat es in meinem Fall behoben.

Cla
quelle
2

In einer Chrome-Erweiterung können Sie verwenden

chrome.webRequest.onHeadersReceived.addListener

um die Server-Antwortheader neu zu schreiben. Sie können entweder einen vorhandenen Header ersetzen oder einen zusätzlichen Header hinzufügen. Dies ist der gewünschte Header:

Access-Control-Allow-Origin: *

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

Ich war in CORB-Fragen festgefahren, und das hat es für mich behoben.

Stepper
quelle
1
"Wenn Sie ab Chrome 72 Antworten ändern müssen, bevor Cross Origin Read Blocking (CORB) die Antwort blockieren kann, müssen Sie in opt_extraInfpSpec 'extraHeaders' angeben." aus dem webRequests doc
swisswiss
0

Antwortheader werden im Allgemeinen auf dem Server festgelegt. Stellen Sie 'Access-Control-Allow-Headers'auf 'Content-Type'auf Server - Seite

LebenszeitLerner007
quelle
7
Ich verwende eine Drittanbieter-API. Also kann ich das nicht machen. Bitte geben Sie mir eine clientseitige Lösung.
Jignesh
4
Der Server entscheidet, was erlaubt und was nicht. Nur der Server hat diesen Zugriff. Die Steuerung von Antwortheadern von der Clientseite aus ist ein Sicherheitsrisiko. Die Aufgabe der Clientseite besteht darin, eine ordnungsgemäße Anfrage zu senden und dann die vom Server gesendete Antwort zu erhalten. Siehe dies: stackoverflow.com/questions/17989951/…
LifetimeLearner007
48
Dies ist CORB, nicht CORS.
Joaquin Brandan
0

Cross-Origin Read Blocking (CORB), ein Algorithmus, mit dem zweifelhafte Cross-Origin-Ressourcenlasten von Webbrowsern identifiziert und blockiert werden können, bevor sie die Webseite erreichen. Er soll verhindern, dass der Browser bestimmte Cross-Origin-Netzwerkantworten liefert zu einer Webseite.

Stellen Sie zunächst sicher, dass diese Ressourcen mit einem korrekten " Content-Type" bereitgestellt werden, dh für den JSON-MIME-Typ - " text/json", " application/json", den HTML-MIME-Typ - " text/html".

Zweitens: Stellen Sie den Modus auf cors, dh mode:cors

Der Abruf würde ungefähr so ​​aussehen

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

Referenzen: 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

Nikil Munireddy
quelle
0

In diesem Zusammenhang gibt es einen erwähnenswerten Randfall: Chrome (zumindest einige Versionen) überprüft CORS-Preflights mithilfe des für CORB eingerichteten Algorithmus . IMO, das ist ein bisschen albern, weil Preflights das CORB-Bedrohungsmodell nicht zu beeinflussen scheinen und CORB orthogonal zu CORS zu sein scheint. Außerdem ist der Körper eines CORS-Preflights nicht zugänglich, sodass es keine negative Konsequenz gibt, sondern nur eine irritierende Warnung.

Überprüfen Sie auf jeden Fall , ob Ihre CORS-Preflight-Antworten (OPTIONS-Methodenantworten) keinen Body haben (204) . Eine leere 200 mit Inhaltstyp Anwendung / Oktett-Stream und Länge Null hat auch hier gut funktioniert.

Sie können bestätigen, ob dies der Fall ist, indem Sie CORB-Warnungen im Vergleich zu OPTIONS-Antworten mit einem Nachrichtentext zählen.

Simon Thum
quelle
0

Es scheint, dass diese Warnung aufgetreten ist, als eine leere Antwort mit einer 200 gesendet wurde.

Diese Konfiguration in meinem .htaccessDisplay zeigt die Warnung auf 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]

Aber ändern Sie die letzte Zeile auf

RewriteRule .* / [R=204,L]

Löse das Problem!

Fluminis
quelle
-2

Ich hatte das gleiche Problem mit meiner Chrome-Erweiterung. Als ich versuchte, meinem Manifest die Option "content_scripts" hinzuzufügen, diesen Teil:

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

Und ich entferne den anderen Teil aus meinen offensichtlichen "Berechtigungen":

"https://*/"

Erst wenn ich es lösche, verschwindet CORB auf einer meiner XHR-Anfragen.

Das Schlimmste ist, dass mein Code nur wenige XHR-Anforderungen enthält und nur einer von ihnen einen CORB-Fehler erhält (warum CORB nicht auf anderen XHR angezeigt wird, weiß ich nicht; warum offensichtliche Änderungen diesen Fehler verursacht haben, weiß ich nicht). Deshalb habe ich den gesamten Code einige Stunden lang immer wieder überprüft und viel Zeit verloren.

Олег Хитрень
quelle
Es gab ein Problem mit den Headern auf der Serverseite. Ich ändere meinen ASP.NET-Rückgabewert in: public async Task <string> Get (string TM) Der Rückgabewert war vor einem Moment JSON (Inhaltstyp, denke ich, "application / json") und jetzt ist es der andere (möglicherweise "Text" /einfach"). Und es hilft. Jetzt gebe ich manifest "Berechtigungen" an "https: // * /" zurück und es funktioniert.
7лег Хитрень
-3

Wenn Sie dies auf einer Safari tun, dauert es keine Zeit. Aktivieren Sie einfach das Entwicklermenü unter Einstellungen >> Datenschutz und deaktivieren Sie im Entwicklungsmenü die Option "Ursprungsübergreifende Einschränkungen deaktivieren". Wenn Sie nur lokal möchten, müssen Sie nur das Entwicklermenü aktivieren und im Entwicklungsmenü "Lokale Dateibeschränkungen deaktivieren" auswählen.

und in Chrome für OSX öffnen Sie das Terminal und führen Sie Folgendes aus:

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

--user-data-dir unter Chrome 49+ unter OSX erforderlich

Für Linux ausführen:

$ google-chrome --disable-web-security

Auch wenn Sie versuchen, für Entwicklungszwecke wie AJAX oder JSON auf lokale Dateien zuzugreifen, können Sie dieses Flag ebenfalls verwenden.

-–allow-file-access-from-files

Gehen Sie für Windows in die Eingabeaufforderung und in den Ordner, in dem sich Chrome.exe befindet, und geben Sie ein

chrome.exe --disable-web-security

Dadurch sollte dieselbe Ursprungsrichtlinie deaktiviert werden und Sie können auf lokale Dateien zugreifen.

Muhammad Haris Baig
quelle
-3

Ich bin auf dieses Problem gestoßen, weil das Format der JSONP-Antwort vom Server falsch ist. Die falsche Antwort lautet wie folgt.

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

Das Problem ist, dass das darin enthaltene Objekt callbackein korrektes JSON-Objekt anstelle eines JSON-Arrays sein sollte. Also habe ich einen Servercode geändert und sein Format geändert:

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

Der Browser akzeptierte die Antwort nach der Änderung gerne.

Searene
quelle
callback(["apple", "peach"])ist vollkommen gültiges JSONP und hat gut funktioniert, als ich es über verschiedene Ursprünge hinweg getestet habe.
Quentin
-4

Versuchen Sie, die Erweiterung "Moesif CORS" zu installieren, wenn Sie Probleme mit Google Chrome haben. Da es sich um eine originensübergreifende Anforderung handelt, akzeptiert Chrome keine Antwort, selbst wenn der Antwortstatuscode 200 lautet

Madhurish Gupta
quelle