it-swarm.com.de

Ursprungsübergreifende Leseblockierung (CORB)

Ich habe die API eines Drittanbieters mit Jquery AJAX aufgerufen. Ich erhalte folgende Fehlermeldung in der Konsole:

Cross-Origin-Leseblockierung (CORB) blockierte Cross-Origin-Antwort MY URL mit MIME-Typ application/json. Unter https://www.chromestatus.com/feature/5629709824032768 finden Sie weitere Einzelheiten.

Ich habe folgenden Code für Ajax Call 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....=================");
  }
});

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

Bitte hilf mir.

34
Jignesh

In den meisten Fällen sollte sich die blockierte Antwort nicht auf das Verhalten der Webseite auswirken, und die CORB-Fehlermeldung kann ignoriert werden. Die Warnung kann beispielsweise in Fällen auftreten, in denen der Hauptteil der blockierten Antwort bereits leer war oder wenn die Antwort an einen Kontext übermittelt werden sollte, der nicht damit umgehen kann (z. B. ein HTML-Dokument wie eine 404-Fehlerseite) zu einem Tag geliefert werden).

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

Ich musste den Cache meines Browsers bereinigen. Ich las diesen Link. Wenn die Anfrage eine leere Antwort erhält, wird diese Warnmeldung angezeigt. Ich erhielt einige CORS auf meine Anfrage, und so wurde die Antwort auf diese Anfrage leer. Alles was ich tun musste, war den Cache des Browsers zu löschen, und der CORS kam weg. Ich habe CORS erhalten, weil der Chrome die PORT-Nummer im Cache gespeichert hat. Der Server würde nur localhost:3010 akzeptieren, und ich machte localhost:3002 wegen des Cache.

10
Marcelo Rafael

haben Sie versucht, die dataType in Ihrer Ajax-Anforderung von jsonp in json zu ändern? das hat es in meinem Fall behoben.

3
Cla

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

3

Es ist nicht klar aus der Frage, aber wenn dies auf einem Entwicklungs- oder Test-Client geschieht und Sie Fiddler bereits verwenden, können Sie Fiddler mit einer Erlaubnisantwort antworten lassen:

  • Wählen Sie die Problemanforderung in Fiddler aus
  • Öffnen Sie die Registerkarte AutoResponder
  • Klicken Add Rule und ändern Sie die Regel in:
    • Methode: OPTIONEN Server-URL hier, z. Method:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Prüfen Unmatched requests passthrough
  • Prüfen Enable Rules

Ein paar Notizen:

  1. Dies ist offensichtlich nur eine Lösung für die Entwicklung/das Testen, bei der es nicht möglich/praktisch ist, den API-Service zu ändern
  2. Stellen Sie sicher, dass alle Vereinbarungen, die Sie mit dem API-Anbieter des Drittanbieters getroffen haben, dies zulassen
  3. Wie andere angemerkt haben, ist dies ein Teil der Funktionsweise von CORS, und möglicherweise muss der Header auf dem API-Server festgelegt werden. Wenn Sie diesen Server steuern, können Sie die Header selbst festlegen. Da es sich in diesem Fall um einen Drittanbieter handelt, kann ich nur davon ausgehen, dass er über einen Mechanismus verfügt, über den Sie ihm die URL der ursprünglichen Site mitteilen können, und dass er seinen Dienst entsprechend aktualisiert, um mit den richtigen Headern zu antworten.
3
Colin Young

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

Wenn Sie nodeJS verwenden, dann:

Zuerst müssen Sie muss installiert werdencors mit dem folgenden Befehl:

npm install cors --save

Jetzt füge folgenden Code hinzu zu deiner App-Startdatei wie (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',

Sie machen eine JSONP-Anforderung, der Server antwortet jedoch mit JSON.

Der Browser weigert sich, JSON als JSONP zu behandeln, da dies ein Sicherheitsrisiko darstellt. (Wenn der Browser did versucht, den JSON als JSONP zu behandeln, würde dies bestenfalls fehlschlagen).

In diese Frage finden Sie weitere Informationen zu JSONP. Beachten Sie, dass dies ein harter Hacker ist, um die gleiche 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 werfen alles, was Sie sich vorstellen können, in einen riesigen Haufen widersprüchlicher Anweisungen.

Sie müssen wissen, wie die Same Origin-Richtlinie funktioniert. 

Siehe diese Frage für eine ausführliche Anleitung.


Nun ein paar Anmerkungen zu Ihrem Code:

contentType: 'application/json',
  • Dies wird ignoriert, wenn Sie JSONP verwenden
  • Sie machen eine GET-Anfrage. Es gibt keinen Anfragetext, um den Typ von zu beschreiben.
  • Dadurch wird eine Cross-Origin-Anfrage nicht einfach, was bedeutet, dass Sie neben den grundlegenden CORS-Berechtigungen auch einen Pre-Flight durchführen müssen.

Entferne das.

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

Entferne das. (Der Server könnte stattdessen mit JSONP antworten, CORS ist jedoch besser).

responseType:'application/json',

Diese Option wird von jQuery.ajax nicht unterstützt. Entferne das.

xhrFields: { withCredentials: false},

Dies ist die Standardeinstellung. Wenn Sie es mit ajaxSetup nicht auf true setzen, entfernen Sie dies.

  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.
  • Dadurch wird eine Cross-Origin-Anfrage nicht einfach, was bedeutet, dass Sie neben den grundlegenden CORS-Berechtigungen auch einen Pre-Flight durchführen müssen.
1
Quentin

Wenn Sie an localhost arbeiten, versuchen Sie dies, dies ist die einzige Erweiterung und Methode, die bei mir funktioniert hat (Angular, nur Javascript, kein PHP)

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

1
pmiranda

In diesem Zusammenhang gibt es einen erwähnenswerten Edge-Fall: Chrome (mindestens 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 so konzipiert ist, dass es orthogonal zu CORS ist. Außerdem ist der Körper eines CORS-Preflight nicht zugänglich, sodass es keine negativen Folgen gibt, nur eine irritierende Warnung.

Wie auch immer, stellen Sie sicher, dass Ihre CORS-Preflight-Antworten (OPTIONS-Methodenantworten) keinen Body haben (204). Auch hier hat eine leere 200 mit dem Inhaltstyp application/octet-stream und der Länge Null gut funktioniert.

Sie können bestätigen, ob dies der Fall ist, indem Sie die CORB-Warnungen gegenüber den OPTIONS-Antworten mit einem Nachrichtentext zählen.

0
Simon Thum

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

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

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

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

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

"https://*/"

Erst wenn ich es lösche, verschwindet CORB auf einem meiner XHR-Requests.

Am schlimmsten ist, dass in meinem Code nur wenige XHR-Anforderungen vorhanden sind und nur eine von ihnen einen CORB-Fehler anzeigt (warum CORB auf anderen XHR-Systemen nicht angezeigt wird, weiß ich nicht; warum offensichtliche Änderungen diesen Fehler verursachten, weiß ich nicht). Deshalb habe ich den gesamten Code einige Stunden lang immer wieder überprüft und viel Zeit verloren.

Ich verwende einen Apache-Server und füge den folgenden Header's zu meinem VirtualHostname Directoryhinzu

    <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

Cross-Origin Read Blocking (CORB), ein Algorithmus, mit dem zweifelhafte Cross-Origin-Ressourcenlasten identifiziert und von Webbrowsern blockiert werden können, bevor sie auf die Webseite gelangen. 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, d. H. Für JSON MIME-Typ - "text/json", "application/json", HTML MIME-Typ - "text/html".

Zweitens: Setze den Modus auf cors, d. H. 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

0
Nikil Munireddy