Bloqueio de leitura de origem cruzada (CORB)

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.

 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.

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.

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

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

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.

Se você estiver trabalhando no host local, tente isso, esta é a única extensão e método que funcionou para mim (Angular, apenas javascript, sem php)

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

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

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.

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

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

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.

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!

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.

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.

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.

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