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

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.

 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.

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.

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

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

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.

Jeśli pracujesz na hoście lokalnym, spróbuj tego, to jedyne rozszerzenie i metoda, które działały dla mnie (Angular, tylko javascript, bez php)

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

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

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.

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

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

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.

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!

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.

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.

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.

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