Bloqueio de leitura de origem cruzada (CORB)


130

Liguei para a API de terceiros usando o Jquery AJAX. Estou recebendo o seguinte erro no console:

O bloqueio de leitura de origem cruzada (CORB) bloqueou a resposta de origem cruzada MY URL com o tipo MIME application / json. Consulte https://www.chromestatus.com/feature/5629709824032768 para obter mais detalhes.

Eu usei o seguinte código para chamada do 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....=================");
  }
});

Quando fiz o check-in no Fiddler, recebi os dados em resposta, mas não no método de sucesso do Ajax.

Por favor, me ajude.


3
Parece que a API que você está chamando não ativou os cabeçalhos necessários para permitir chamadas entre domínios do JS. Você provavelmente precisará fazer a chamada no servidor. Tem certeza de que a resposta é JSONP e não JSON simples? Observe também que os cabeçalhos que você está adicionando na solicitação precisam ser colocados na resposta do servidor.
Rory McCrossan

3
Você resolveu esse erro ou aviso de CORB? Estou enfrentando o mesmo com o módulo de solicitação.
Sherwin Ablaña Dapito

3
@ SherwinAblañaDapito se você ainda está procurando uma solução, veja a minha resposta para ambientes de desenvolvimento / teste
Colin Young

1
Para demonstrar como seu JS pode funcionar corretamente, você pode iniciar o Chrome em um modo não seguro chrome.exe --user-data-dir = "C: / Chrome dev session" --disable-web-security Mas "Read Blocking (CORB) resposta de origem bloqueada " deve ser corrigida no servidor.
Ruslan Novikov

Respostas:


37
 dataType:'jsonp',

Você está fazendo uma solicitação JSONP, mas o servidor está respondendo com JSON.

O navegador está se recusando a tentar tratar o JSON como JSONP, pois isso seria um risco à segurança. (Se o navegador que tentam tratar o JSON como JSONP então seria, na melhor das hipóteses, falham).

Veja esta pergunta para obter mais detalhes sobre o que é JSONP. Observe que é um truque desagradável para solucionar a mesma política de origem usada antes do CORS estar disponível. O CORS é uma solução muito mais limpa, segura e poderosa para o problema.


Parece que você está tentando fazer uma solicitação de origem cruzada e está lançando tudo o que pode pensar em uma pilha maciça de instruções conflitantes.

Você precisa entender como a política de mesma origem funciona.

Veja esta pergunta para um guia detalhado.


Agora, algumas notas sobre o seu código:

contentType: 'application/json',
  • Isso é ignorado quando você usa JSONP
  • Você está fazendo uma solicitação GET. Não há um corpo de solicitação para descrever o tipo de.
  • Isso tornará uma solicitação de origem não simples, o que significa que, além das permissões básicas do CORS, você também precisará lidar com um pré-vôo.

Tira isso.

 dataType:'jsonp',
  • O servidor não está respondendo com JSONP.

Tire isto. (Você pode fazer o servidor responder com JSONP, mas o CORS é melhor).

responseType:'application/json',

Esta não é uma opção suportada pelo jQuery.ajax. Tire isto.

xhrFields: {withCredentials: false},

Esse é o padrão. A menos que você esteja configurando como true com ajaxSetup, remova-o.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • Estes são cabeçalhos de resposta. Eles pertencem à resposta, não à solicitação.
  • Isso tornará uma solicitação de origem não simples, o que significa que, além das permissões básicas do CORS, você também precisará lidar com um pré-vôo.

20

Na maioria dos casos, a resposta bloqueada não deve afetar o comportamento da página da web e a mensagem de erro CORB pode ser ignorada com segurança. Por exemplo, o aviso pode ocorrer nos casos em que o corpo da resposta bloqueada já estava vazio ou quando a resposta seria entregue em um contexto que não pode lidar com isso (por exemplo, um documento HTML, como uma página de erro 404 sendo entregue a uma tag).

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

Eu tive que limpar o cache do meu navegador, estava lendo neste link que, se a solicitação receber uma resposta vazia, receberemos este erro de aviso. Eu estava recebendo alguns CORS em minha solicitação e, portanto, a resposta dessa solicitação ficou vazia. Tudo o que eu precisava fazer era limpar o cache do navegador e o CORS escapou. Eu estava recebendo o CORS porque o chrome salvou o número PORT no cache. O servidor simplesmente aceitava localhost:3010e eu estava fazendo localhost:3002, por causa do cache.


12

Retorne a resposta com o cabeçalho 'Access-Control-Allow-Origin: *' Verifique o código abaixo para obter a resposta do servidor Php.

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

2
Sua resposta me ajudou MUITO !!! Simplesmente não posso agradecer o suficiente. Continuarei pesquisando o que o "Controle de Acesso Permitir Origem" faz para entender as implicações, mas estou aprendendo o básico da criação de um serviço da Web PHP e isso me ajudou como você não acreditaria. OBRIGADO!!!
23819 Adam Laurie

Isso não resolve o problema. É um erro CORB causado pelo envio de uma resposta Content-Type: application/jsonnele. O código do OP já deve estar fazendo isso.
Quentin

1
@Quentin, ??? O senso comum afirma que, desde que você tenha Permitir origem, o navegador permitirá a solicitação, independentemente de qualquer cabeçalho / corpo suspeito.
Pacerier

7

Você precisa adicionar o CORS no lado do servidor:

Se você estiver usando o nodeJS, então:

Primeiro você precisa instalar cors usando o comando abaixo:

npm install cors --save

Agora adicione o seguinte código ao arquivo inicial do aplicativo, como ( 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);

22
Se você precisar adicionar uma extensão para corrigir seu problema, você está manipulando incorretamente a solicitação no servidor. Apenas uma nota.
Alexander Falk

2
Não é possível solicitar que minha base de usuários instale uma extensão estranha do Chrome. E quanto a outros navegadores?
Israel Rodriguez

2
Embora essa resposta não resolva o problema a longo prazo, ela estava usando este plug-in que verificou para meus colegas de trabalho que era um problema do CORS. Tão votado por isso!
KoldBane

2
@ VladimirNul a resposta original era sobre uma extensão do Chrome. Shubham reescreveu. Verifique o histórico, por favor.
Israel Rodriguez

3
Há alguma confusão aqui. O PO refere-se ao CORB e não ao CORS.
Não é uma máquina

3

Não está claro a partir da pergunta, mas supondo que isso esteja acontecendo em um cliente de desenvolvimento ou teste e, como você já está usando o Fiddler, você pode fazer com que o Fiddler responda com uma resposta de permissão:

  • Selecione a solicitação de problema no Fiddler
  • Abra a AutoResponderaba
  • Clique Add Rulee edite a regra para:
    • Método: URL do servidor OPTIONS aqui , por exemploMethod:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Verifica Unmatched requests passthrough
  • Verifica Enable Rules

Algumas notas:

  1. Obviamente, essa é apenas uma solução para desenvolvimento / teste em que não é possível / prático modificar o serviço da API
  2. Verifique se todos os acordos que você tem com o provedor de API de terceiros permitem fazer isso
  3. Como outros observaram, isso faz parte de como o CORS funciona e, eventualmente, o cabeçalho precisará ser definido no servidor da API. Se você controlar esse servidor, poderá definir os cabeçalhos. Nesse caso, como se trata de um serviço de terceiros, posso apenas assumir que eles possuem algum mecanismo pelo qual você pode fornecer a URL do site de origem e eles atualizarão o serviço de acordo com os cabeçalhos corretos.


2

você já tentou alterar dataTypena sua solicitação ajax de jsonppara json? que consertou no meu caso.


2

Em uma extensão do Chrome, você pode usar

chrome.webRequest.onHeadersReceived.addListener

reescrever os cabeçalhos de resposta do servidor. Você pode substituir um cabeçalho existente ou adicionar um cabeçalho adicional. Este é o cabeçalho que você deseja:

Access-Control-Allow-Origin: *

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

Eu estava preso em questões CORB, e isso corrigiu para mim.


1
"A partir do Chrome 72, se você precisar modificar as respostas antes que o CORB (Cross Origin Read Blocking) possa bloquear a resposta, será necessário especificar 'extraHeaders' em opt_extraInfpSpec." do webRequests doc
swisswiss 5/04

0

Os cabeçalhos de resposta geralmente são definidos no servidor. Definir 'Access-Control-Allow-Headers'a 'Content-Type'no lado do servidor


7
Estou usando a API de terceiros. Então eu não posso fazer isso. Por favor, me dê qualquer solução do lado do cliente.
Jignesh

4
O servidor decide o que permitir e o que não permitir. Somente o servidor tem esse acesso. Controlar cabeçalhos de resposta do lado do cliente é um risco à segurança. O trabalho do lado do cliente é enviar a solicitação adequada e obter a resposta enviada pelo servidor. Veja esta: stackoverflow.com/questions/17989951/...
lifetimeLearner007

48
Este é CORB, não CORS.
Joaquin Brandan

0

Bloqueio de leitura de origem cruzada (CORB), um algoritmo pelo qual carregamentos duvidosos de recursos de origem cruzada podem ser identificados e bloqueados pelos navegadores antes de chegarem à página da Web. Ele foi desenvolvido para impedir que o navegador forneça determinadas respostas de rede de origem cruzada para uma página da web.

Primeiro Certifique-se de que esses recursos sejam atendidos com um " Content-Type" correto , ou seja, para o tipo JSON MIME - " text/json", " application/json", tipo HTML MIME - " text/html".

Segundo: ajuste o modo para cors, ou seja, mode:cors

A busca seria algo parecido com isto

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

referências: 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

Há um caso extremo que vale a pena mencionar neste contexto: o Chrome (algumas versões, pelo menos) verifica os preflights do CORS usando o algoritmo configurado para o CORB . Na IMO, isso é um pouco tolo, porque os preflights parecem não afetar o modelo de ameaça CORB, e o CORB parece projetado para ser ortogonal ao CORS. Além disso, o corpo de uma comprovação do CORS não está acessível, portanto, não há conseqüências negativas, apenas um aviso irritante.

De qualquer forma, verifique se suas respostas de comprovação do CORS (respostas do método OPTIONS) não possuem um corpo (204) . Um 200 vazio com o tipo de conteúdo application / octet-stream e comprimento zero também funcionou bem aqui.

Você pode confirmar se esse é o caso que você está atingindo, contando avisos CORB versus respostas OPTIONS com um corpo da mensagem.


0

Parece que esse aviso ocorreu ao enviar uma resposta vazia com um 200.

Essa configuração no meu .htaccessdisplay exibe o aviso no 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]

Mas alterar a última linha para

RewriteRule .* / [R=204,L]

Resolver o problema!


-2

Eu tive o mesmo problema com minha extensão do Chrome. Quando tentei adicionar ao meu manifesto "content_scripts" esta parte:

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

E removo a outra parte do meu manifesto "permissons":

"https://*/"

Somente quando eu o excluo CORB em um dos meus pedidos XHR desaparece.

O pior de tudo é que há poucas solicitações de XHR no meu código e apenas uma delas começa a receber um erro CORB (por que o CORB não aparece em outro XHR que eu não conheço; por que mudanças manifestas provocaram esse erro que eu não sei). Foi por isso que inspecionei o código inteiro várias vezes por algumas horas e perdi muito tempo.


Houve algum problema com os cabeçalhos no lado do servidor. Altero meu valor de retorno do ASP.NET para: public async Task <string> Get (string TM) O valor de retorno foi um momento atrás JSON (tipo de conteúdo que eu acho "application / json") e agora é o outro (pode ser "texto" /avião"). E isso ajuda. Agora, retorno "permissões" do manifesto para "https: // * /" e funciona.
Enviado em 07/07/19

-3

Se você fizer isso no safari, não demorará muito tempo, basta ativar o menu do desenvolvedor em Preferências >> Privacidade e desmarcar "Desativar restrições de origem cruzada" no menu de desenvolvimento. Se você deseja apenas local, é necessário ativar o menu do desenvolvedor e selecionar "Desativar restrições de arquivo local" no menu de desenvolvimento.

e no Chrome for OSX abra o Terminal e execute:

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

--user-data-dir necessário no Chrome 49 ou superior no OSX

Para Linux, execute:

$ google-chrome --disable-web-security

Além disso, se você estiver tentando acessar arquivos locais para fins de desenvolvimento como AJAX ou JSON, também poderá usar esse sinalizador.

-–allow-file-access-from-files

No Windows, entre no prompt de comando e vá para a pasta onde está o Chrome.exe e digite

chrome.exe --disable-web-security

Isso deve desativar a mesma política de origem e permitir que você acesse arquivos locais.


-3

Encontrei esse problema porque o formato da resposta jsonp do servidor está errado. A resposta incorreta é a seguinte.

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

O problema é que o objeto dentro callbackdeve ser um objeto json correto, em vez de uma matriz json. Então eu modifiquei algum código do servidor e mudei de formato:

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

O navegador aceitou com satisfação a resposta após a modificação.


callback(["apple", "peach"])é perfeitamente válido JSONP, e funcionou bem quando eu testei através de origens.
Quentin

-4

Tente instalar a extensão "Moesif CORS" se você estiver enfrentando problemas no google chrome. Como é uma solicitação de origem cruzada, o chrome não aceita uma resposta, mesmo quando o código de status da resposta é 200

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.