Ursprungsübergreifende Leseblockierung (CORB)

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.

 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.

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.

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

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

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.

Wenn Sie an localhost arbeiten, versuchen Sie dies, dies ist die einzige Erweiterung und Methode, die für mich funktioniert hat (Angular, nur Javascript, kein PHP)

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

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

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.

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

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

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.

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!

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.

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.

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.

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