Blokowanie odczytu między źródłami (CORB)

130

Zadzwoniłem do interfejsu API innej firmy za pomocą Jquery AJAX. W konsoli pojawia się następujący błąd:

Cross-Origin Read Blocking (CORB) zablokował odpowiedź między źródłami MÓJ URL z aplikacją typu MIME / json. Więcej informacji można znaleźć pod adresem https://www.chromestatus.com/feature/5629709824032768 .

Użyłem następującego kodu dla połączenia 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....=================");
  }
});

Kiedy zameldowałem się w Fiddlera, otrzymałem dane w odpowiedzi, ale nie w metodzie sukcesu Ajax.

Proszę pomóż mi.

Jignesh
źródło
3
Wygląda na to, że wywoływany interfejs API nie włączył nagłówków wymaganych do umożliwienia wywołań międzydomenowych z JS. Najprawdopodobniej będziesz musiał zamiast tego wykonać połączenie na serwerze. Czy na pewno odpowiedź to JSONP, a nie zwykły JSON? Zauważ również, że nagłówki, które dodajesz w żądaniu, należy zamiast tego umieścić w odpowiedzi z serwera.
Rory McCrossan
3
Czy rozwiązałeś ten błąd lub ostrzeżenie CORB? Doświadczam tego samego z modułem żądań.
Sherwin Ablaña Dapito,
3
@ SherwinAblañaDapito, jeśli nadal szukasz rozwiązania, zobacz moją odpowiedź dotyczącą środowisk programistycznych / testowych
Colin Young
1
Aby zademonstrować, jak Twój JS może działać poprawnie, możesz uruchomić Chrome w niebezpiecznym trybie chrome.exe --user-data-dir = "C: / Chrome dev session" --disable-web-security But "Read Blocking (CORB) zablokowana odpowiedź między źródłami ” musi zostać naprawiona po stronie serwera.
Ruslan Novikov

Odpowiedzi:

37
 dataType:'jsonp',

Wysyłasz żądanie JSONP, ale serwer odpowiada za pomocą JSON.

Przeglądarka odmawia traktowania JSON jako JSONP, ponieważ stanowiłoby to zagrożenie bezpieczeństwa. (Jeśli przeglądarka nie próbować leczyć JSON jako jsonp wtedy byłoby w najlepszym wypadku uda).

Zobacz to pytanie, aby uzyskać więcej informacji na temat tego, czym jest JSONP. Zauważ, że jest to nieprzyjemny hack do obejścia tej samej zasady pochodzenia, która była używana przed udostępnieniem CORS. CORS to znacznie czystsze, bezpieczniejsze i potężniejsze rozwiązanie problemu.


Wygląda na to, że próbujesz wysłać żądanie między źródłami i wrzucasz wszystko, o czym myślisz, w jednym ogromnym stosie sprzecznych instrukcji.

Musisz zrozumieć, jak działa zasada Same Origin.

Zobacz to pytanie, aby uzyskać szczegółowy przewodnik.


Teraz kilka uwag na temat twojego kodu:

contentType: 'application/json',
  • Jest to ignorowane, gdy używasz JSONP
  • Wysyłasz żądanie GET. Nie ma treści żądania opisującej typ.
  • Spowoduje to, że żądanie między źródłami nie będzie proste, co oznacza, że ​​oprócz podstawowych uprawnień CORS musisz również zająć się przed lotem.

Usuń to.

 dataType:'jsonp',
  • Serwer nie odpowiada za pomocą JSONP.

Usuń to. (Możesz zamiast tego sprawić, by serwer odpowiadał za pomocą JSONP, ale CORS jest lepszy).

responseType:'application/json',

To nie jest opcja obsługiwana przez jQuery.ajax. Usuń to.

xhrFields: {withCredentials: false},

To jest ustawienie domyślne. Jeśli nie ustawiasz jej na true za pomocą ajaxSetup, usuń to.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • To są nagłówki odpowiedzi. Należą do odpowiedzi, a nie do prośby.
  • Spowoduje to, że żądanie między źródłami nie będzie proste, co oznacza, że ​​oprócz podstawowych uprawnień CORS musisz również zająć się przed lotem.
Quentin
źródło
20

W większości przypadków zablokowana odpowiedź nie powinna wpływać na zachowanie strony internetowej, a komunikat o błędzie CORB można bezpiecznie zignorować. Na przykład ostrzeżenie może wystąpić w przypadkach, gdy treść zablokowanej odpowiedzi była już pusta lub gdy odpowiedź miała zostać dostarczona do kontekstu, który jej nie obsługuje (np. Dokument HTML, taki jak strona błędu 404 dostarczane do tagu).

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

Musiałem wyczyścić pamięć podręczną przeglądarki, czytałem w tym linku, że jeśli żądanie otrzyma pustą odpowiedź, otrzymamy ten błąd ostrzegawczy. Otrzymywałem kilka CORSów na moje żądanie, więc odpowiedź na to żądanie była pusta. Wszystko, co musiałem zrobić, to wyczyścić pamięć podręczną przeglądarki, a CORS uciekł. Otrzymywałem CORS, ponieważ chrome zapisał numer PORT w pamięci podręcznej, serwer po prostu zaakceptował localhost:3010i robiłem localhost:3002, z powodu pamięci podręcznej.

Alex
źródło
12

Odpowiedź zwrotna z nagłówkiem „Access-Control-Allow-Origin: *” Sprawdź poniższy kod odpowiedzi serwera Php.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 
Jestin
źródło
2
Twoja odpowiedź pomogła mi TAK DUŻO !!! Po prostu nie mogę ci wystarczająco podziękować. Będę nadal badał, co robi „Kontrola dostępu zezwalaj na pochodzenie”, więc rozumiem konsekwencje, ale dopiero uczę się podstaw tworzenia serwisu WWW PHP i pomogło mi to, tak jak byś nie uwierzył. DZIĘKUJĘ CI!!!
Adam Laurie
To w ogóle nie rozwiązuje problemu. Jest to błąd CORB spowodowany wysłaniem odpowiedzi z zawartością Content-Type: application/json. Kod OP musi już to robić.
Quentin
1
@Quentin, ??? Zdrowy rozsądek mówi, że tak długo, jak masz opcję Zezwalaj na pochodzenie, przeglądarka zezwoli na żądanie niezależnie od podejrzanego nagłówka / treści.
Pacerier
7

Musisz dodać CORS po stronie serwera:

Jeśli używasz nodeJS, to:

Najpierw musisz zainstalować cors za pomocą poniższego polecenia:

npm install cors --save

Teraz dodaj następujący kod do pliku początkowego aplikacji, np. ( 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
źródło
22
Jeśli chcesz dodać rozszerzenie, aby naprawić problem, nieprawidłowo obsługujesz żądanie po stronie serwera. Tylko uwaga.
Alexander Falk,
2
Poproszenie mojej bazy użytkowników o zainstalowanie dziwnego rozszerzenia Chrome jest niewykonalne. A co z innymi przeglądarkami?
Israel Rodriguez
2
Chociaż ta odpowiedź nie rozwiązuje problemu w dłuższej perspektywie, używała tej wtyczki, która zweryfikowała moim współpracownikom, że był to problem z CORS. Tak za to popieraliśmy!
KoldBane
2
@VladimirNul oryginalna odpowiedź dotyczyła rozszerzenia do Chrome. Shubham przepisał to. Sprawdź historię.
Israel Rodriguez
3
Jest tu trochę zamieszania. OP odnosi się do CORB, a nie CORS.
To nie jest maszyna
3

Z pytania nie wynika jasno, ale zakładając, że dzieje się tak na kliencie deweloperskim lub testowym, a biorąc pod uwagę, że już używasz programu Fiddler, możesz poprosić Fiddlera o odpowiedź zezwalającą:

  • Wybierz zgłoszenie problemu w programie Fiddler
  • Otwórz AutoResponderkartę
  • Kliknij Add Rulei edytuj regułę, aby:
    • Metoda: tutaj OPCJE adres URL serwera , npMethod:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Czek Unmatched requests passthrough
  • Czek Enable Rules

Kilka uwag:

  1. Oczywiście jest to tylko rozwiązanie do programowania / testowania, w którym nie jest możliwa / praktyczna modyfikacja usługi API
  2. Sprawdź, czy wszelkie umowy, które masz z zewnętrznym dostawcą interfejsu API, pozwalają na to
  3. Jak zauważyli inni, jest to część sposobu działania CORS i ostatecznie nagłówek będzie musiał zostać ustawiony na serwerze API. Jeśli kontrolujesz ten serwer, możesz samodzielnie ustawić nagłówki. W tym przypadku, ponieważ jest to usługa strony trzeciej, mogę tylko założyć, że mają mechanizm, za pomocą którego możesz podać im adres URL strony źródłowej i odpowiednio zaktualizują swoją usługę, aby odpowiedzieć poprawnymi nagłówkami.
Colin Young
źródło
2

czy próbowałeś zmienić dataTypew swoim żądaniu ajax z jsonpna json? to naprawiło to w moim przypadku.

Cla
źródło
2

W rozszerzeniu Chrome możesz użyć

chrome.webRequest.onHeadersReceived.addListener

przepisać nagłówki odpowiedzi serwera. Możesz zastąpić istniejący nagłówek lub dodać dodatkowy nagłówek. To jest żądany nagłówek:

Access-Control-Allow-Origin: *

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

Utknąłem w problemach z CORB i to rozwiązało problem.

stepper
źródło
1
„Począwszy od Chrome 72, jeśli musisz zmodyfikować odpowiedzi, zanim Cross Origin Read Blocking (CORB) może zablokować odpowiedź, musisz określić 'extraHeaders' w opt_extraInfpSpec.” from the webRequests doc
swisswiss
0

Nagłówki odpowiedzi są zwykle ustawiane na serwerze. Ustaw 'Access-Control-Allow-Headers'się 'Content-Type'na stronie serwera

LifetimeLearner007
źródło
7
Używam interfejsu API innej firmy. Więc nie mogę tego zrobić. Proszę o jakiekolwiek rozwiązanie po stronie klienta.
Jignesh
4
Serwer decyduje, na co zezwolić, a czego nie. Tylko serwer ma taki dostęp. Kontrolowanie nagłówków odpowiedzi po stronie klienta stanowi zagrożenie bezpieczeństwa. Zadaniem klienta jest wysłanie odpowiedniego żądania, a następnie uzyskanie jakiejkolwiek odpowiedzi wysłanej przez serwer. Zobacz to: stackoverflow.com/questions/17989951/…
lifetimeLearner007
48
To jest CORB, a nie CORS.
Joaquin Brandan
0

Cross-Origin Read Blocking (CORB), algorytm, dzięki któremu wątpliwe ładunki zasobów z różnych źródeł mogą być identyfikowane i blokowane przez przeglądarki internetowe, zanim dotrą do strony internetowej. Jego celem jest zapobieganie dostarczaniu przez przeglądarkę pewnych odpowiedzi sieciowych między źródłami do strony internetowej.

Najpierw upewnij się, że te zasoby są obsługiwane z poprawnym „ Content-Type”, tj. Dla typu JSON MIME - „ text/json”, „ application/json”, typu MIME HTML - „ text/html”.

Po drugie: ustaw tryb na cors, czyli mode:cors

Pobieranie wyglądałoby mniej więcej tak

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

referencje: 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
źródło
0

W tym kontekście warto wspomnieć o skrajnym przypadku: Chrome (przynajmniej w niektórych wersjach) sprawdza preflights CORS za pomocą algorytmu ustawionego dla CORB . IMO, to jest trochę głupie, ponieważ przed lotami nie wydaje się wpływać na model zagrożenia CORB, a CORB wydaje się być zaprojektowany jako ortogonalny do CORS. Ponadto treść inspekcji wstępnej CORS jest niedostępna, więc nie ma negatywnych konsekwencji, tylko irytujące ostrzeżenie.

W każdym razie sprawdź , czy odpowiedzi inspekcji wstępnej CORS (odpowiedzi metod OPTIONS) nie mają treści (204) . Pusta 200 z typem treści application / octet-stream i długością zero również działała tutaj.

Możesz potwierdzić, czy tak jest w przypadku trafienia, licząc ostrzeżenia CORB w porównaniu z odpowiedziami OPTIONS z treścią wiadomości.

Simon Thum
źródło
0

Wygląda na to, że to ostrzeżenie pojawiło się podczas wysyłania pustej odpowiedzi z 200.

Ta konfiguracja w moim .htaccesswyświetla ostrzeżenie w przeglądarce 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]

Ale zmieniam ostatnią linię na

RewriteRule .* / [R=204,L]

rozwiązać problem!

fluminis
źródło
-2

Miałem ten sam problem z moim rozszerzeniem do Chrome. Kiedy próbowałem dodać do mojego manifestu opcję „content_scripts” tę część:

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

A drugą część usuwam z manifestu „zezwoleń”:

"https://*/"

Dopiero gdy go usunę, CORB na jednym z moich żądań XHR zniknie.

Najgorsze jest to, że w moim kodzie jest kilka żądań XHR i tylko jeden z nich zaczyna otrzymywać błąd CORB (dlaczego CORB nie pojawia się na innych XHR, nie wiem; dlaczego oczywiste zmiany spowodowały ten błąd, nie wiem). Dlatego sprawdzałem cały kod raz po raz przez kilka godzin i straciłem dużo czasu.

Олег Хитрень
źródło
Wystąpił problem z nagłówkami po stronie serwera. Zmieniam moją wartość zwracaną przez ASP.NET na: public async Zadanie <string> Get (string TM) Wartość zwracana była przed chwilą JSON (typ zawartości chyba "application / json") a teraz jest inny (może być "tekst /Równina"). I to pomaga. Teraz zwracam manifest "uprawnienia" do "https: // * /" i działa.
Олег Хитрень
-3

Jeśli zrobisz to w Safari, nie zajmie to czasu, po prostu włącz menu programisty w Preferencjach >> Prywatność i odznacz opcję „Wyłącz ograniczenia między źródłami” z menu rozwijania. Jeśli chcesz tylko lokalne, wystarczy włączyć menu programisty i wybrać opcję „Wyłącz ograniczenia plików lokalnych” z menu rozwijania.

aw Chrome na OSX otwórz Terminal i uruchom:

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

--user-data-dir wymagany w Chrome 49+ na OSX

W przypadku systemu Linux uruchom:

$ google-chrome --disable-web-security

Również jeśli próbujesz uzyskać dostęp do plików lokalnych do celów programistycznych, takich jak AJAX lub JSON, możesz również użyć tej flagi.

-–allow-file-access-from-files

W systemie Windows przejdź do wiersza poleceń i przejdź do folderu, w którym znajduje się Chrome.exe, i wpisz

chrome.exe --disable-web-security

Powinno to wyłączyć te same zasady pochodzenia i umożliwić dostęp do plików lokalnych.

Muhammad Haris Baig
źródło
-3

Napotkałem ten problem, ponieważ format odpowiedzi jsonp z serwera jest nieprawidłowy. Niepoprawna odpowiedź jest następująca.

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

Problem polega na tym, że obiekt wewnątrz callbackpowinien być poprawnym obiektem json, a nie tablicą json. Więc zmodyfikowałem kod serwera i zmieniłem jego format:

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

Przeglądarka szczęśliwie przyjęła odpowiedź po modyfikacji.

Searene
źródło
callback(["apple", "peach"])jest doskonale poprawnym JSONP i działał dobrze, gdy testowałem go na różnych źródłach.
Quentin
-4

Spróbuj zainstalować rozszerzenie „Moesif CORS”, jeśli napotykasz problem w Google Chrome. Ponieważ jest to żądanie z różnych źródeł, Chrome nie przyjmuje odpowiedzi, nawet jeśli kod statusu odpowiedzi to 200

Madhurish Gupta
źródło