javascript - tag - title of page html

Bloqueo de lectura de origen cruzado(CORB)

Question

He llamado API de terceros usando Jquery AJAX. Estoy recibiendo el siguiente error en la consola:

El bloqueo de lectura de origen cruzado (CORB) bloqueó la respuesta de origen cruzado MY URL con la aplicación / json de tipo MIME. Consulte https://www.chromestatus.com/feature/5629709824032768 para obtener más detalles.

He usado el siguiente código para la llamada 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....=================");
}
});

Cuando registré Fiddler, obtuve los datos en respuesta, pero no en el método de éxito Ajax.

Por favor, ayúdame.

Answer 1

En la mayoría de los casos, la respuesta bloqueada no debe afectar el comportamiento de la página web y el mensaje de error CORB se puede ignorar de forma segura. Por ejemplo, la advertencia puede aparecer en los casos en que el cuerpo de la respuesta bloqueada ya estaba vacío, o cuando la respuesta se enviaría a un contexto que no puede manejarlo (por ejemplo, un documento HTML como una página de error 404). siendo entregado a una etiqueta).

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

Tuve que limpiar el caché de mi navegador, estaba leyendo en este enlace, que si la solicitud obtiene una respuesta vacía, obtenemos este error de advertencia. Recibí algo de CORS en mi solicitud, por lo que la respuesta de esta solicitud se quedó en blanco. Todo lo que tuve que hacer fue borrar el caché del navegador y el CORS se escapó. Estaba recibiendo CORS porque Chrome había guardado el número de PORT en el caché. El servidor simplemente aceptaría localhost:3010 y estaba haciendo localhost:3002 , debido al caché.

Answer 2

 dataType:''jsonp'',

Está realizando una solicitud JSONP, pero el servidor responde con JSON.

El navegador se niega a tratar de tratar el JSON como JSONP porque sería un riesgo de seguridad. (Si el navegador intentara tratar el JSON como JSONP, entonces, en el mejor de los casos, fallaría).

Vea esta pregunta para obtener más detalles sobre qué es JSONP. Tenga en cuenta que es un truco desagradable para trabajar en torno a la misma política de origen que se utilizó antes de que CORS estuviera disponible. CORS es una solución al problema mucho más limpia, segura y poderosa.

Parece que está intentando realizar una solicitud de origen cruzado y está lanzando todo lo que puede pensar en una gran cantidad de instrucciones contradictorias.

Necesitas entender cómo funciona la política de Same Origin.

Vea esta pregunta para una guía en profundidad.

Ahora algunas notas sobre su código:

contentType: ''application/json'',

• Esto se ignora cuando usas JSONP
• Estás haciendo una solicitud GET. No hay ningún cuerpo de solicitud para describir el tipo de.
• Esto hará que la solicitud de origen cruzado no sea simple, lo que significa que, además de los permisos básicos de CORS, también debe tratar un vuelo previo.

Quita eso.

 dataType:''jsonp'',

• El servidor no responde con JSONP.

Quita esto. (Podría hacer que el servidor responda con JSONP en su lugar, pero CORS es mejor).

responseType:''application/json'',

Esta no es una opción soportada por jQuery.ajax. Quita esto.

xhrFields: {withCredentials: false},

Este es el valor predeterminado. A menos que lo esté configurando en verdadero con ajaxSetup, elimine esto.

 headers: {
''Access-Control-Allow-Credentials'' : true,
''Access-Control-Allow-Origin'':''*'',
''Access-Control-Allow-Methods'':''GET'',
''Access-Control-Allow-Headers'':''application/json'',
},

• Estos son los encabezados de respuesta. Pertenecen a la respuesta, no a la solicitud.
• Esto hará que la solicitud de origen cruzado no sea simple, lo que significa que, además de los permisos básicos de CORS, también debe tratar un vuelo previo.

Answer 3

¿ha intentado cambiar el dataType en su solicitud de ajax de jsonp a json ? Eso lo arreglé en mi caso.

Answer 4

Devuelva la respuesta con el encabezado ''Access-Control-Allow-Origin: *'' Verifique el código de abajo para obtener la respuesta del servidor Php.

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

Answer 5

El bloqueo de lectura de origen cruzado (CORB), un algoritmo mediante el cual los navegadores web pueden identificar y bloquear las cargas dudosas de recursos de origen cruzado antes de que lleguen a la página web. Está diseñado para evitar que el navegador ofrezca ciertas respuestas de red de origen cruzado a una página web.

Primero Asegúrese de que estos recursos se sirvan con un " Content-Type " correcto, es decir, para el tipo JSON MIME - " text/json ", " application/json ", tipo HTML MIME - " text/html ".

Segundo: establecer el modo a cors, es decir, mode:cors

La búsqueda se vería algo como esto

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

referencias: 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

Answer 6

Encontré este problema porque el formato de la respuesta jsonp del servidor es incorrecto. La respuesta incorrecta es la siguiente.

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

El problema es que el objeto dentro de la callback debe ser un objeto json correcto, en lugar de una matriz json. Así que modifiqué un código de servidor y cambié su formato:

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

El navegador aceptó felizmente la respuesta después de la modificación.

Answer 7

Hay un caso de ventaja que vale la pena mencionar en este contexto: Chrome (algunas versiones, al menos) verifica las Preflights de CORS utilizando el algoritmo configurado para CORB . En mi opinión, esto es un poco tonto porque las pruebas previas no parecen afectar el modelo de amenaza CORB, y CORB parece estar diseñado para ser ortogonal a CORS. Además, el cuerpo de una verificación previa de CORS no es accesible, por lo que no hay una consecuencia negativa, solo una advertencia irritante.

De todos modos, verifique que sus respuestas de verificación previa de CORS (respuestas del método OPCIONES) no tengan un cuerpo (204) . Un 200 vacío con aplicación de tipo de contenido / flujo de octetos y longitud cero funcionó bien aquí también.

Puede confirmar si este es el caso que está golpeando contando las advertencias de CORB frente a las respuestas de OPCIONES con un cuerpo de mensaje.

Answer 8

Intenta instalar la extensión "Moesif CORS" si tienes un problema en google chrome. Como se trata de una solicitud de origen cruzado, Chrome no acepta una respuesta incluso cuando el código de estado de respuesta es 200

Answer 9

Los encabezados de respuesta generalmente se establecen en el servidor. Establezca ''Access-Control-Allow-Headers'' en ''Content-Type'' en el lado del servidor

Answer 10

No queda claro en la pregunta, pero suponiendo que esto suceda en un cliente de desarrollo o de prueba, y dado que ya está utilizando Fiddler, puede hacer que Fiddler responda con una respuesta de permiso:

• Seleccione la solicitud de problema en Fiddler
• Abre la pestaña del AutoResponder
• Haga clic en Add Rule y edite la regla para:
  • Método: URL del servidor de OPCIONES aquí , por ejemplo, Method:OPTIONS http://localhost
  • *CORSPreflightAllow
• Comprobar las Unmatched requests passthrough
• Verifique las Enable Rules

Un par de notas:

1. Obviamente, esta es solo una solución para desarrollo / prueba donde no es posible / práctico modificar el servicio API
2. Compruebe que cualquier acuerdo que tenga con el proveedor de API de terceros le permita hacer esto
3. Como han señalado otros, esto es parte de cómo funciona CORS, y, finalmente, el encabezado deberá configurarse en el servidor API. Si controla ese servidor, puede configurar los encabezados usted mismo. En este caso, dado que se trata de un servicio de terceros, solo puedo asumir que tienen algún mecanismo a través del cual usted puede proporcionarles la URL del sitio de origen y actualizarán su servicio en consecuencia para responder con los encabezados correctos.

Answer 11

Si está trabajando en localhost, intente esto, esta es la única extensión y método que funcionó para mí (Angular, solo javascript, no php)

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

Answer 12

Si lo hace en un safari, no se demora, simplemente habilite el menú de desarrolladores desde Preferencias >> Privacidad y deseleccione "Deshabilitar restricciones de origen cruzado" en el menú de desarrollo. Si solo desea local, entonces solo necesita habilitar el menú del desarrollador y seleccionar "Deshabilitar restricciones de archivos locales" en el menú de desarrollo.

y en Chrome para OSX abre Terminal y ejecuta:

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

--user-data-dir requerido en Chrome 49+ en OSX

Para ejecutar Linux:

$ google-chrome --disable-web-security

Además, si está intentando acceder a archivos locales para fines de desarrollo como AJAX o JSON, también puede utilizar esta bandera.

-–allow-file-access-from-files

Para Windows, ingrese a la línea de comandos y vaya a la carpeta donde se encuentra Chrome.exe y escriba

chrome.exe --disable-web-security

Eso debería deshabilitar la misma política de origen y permitirle acceder a los archivos locales.

Answer 13

Tuve el mismo problema con mi extensión de Chrome. Cuando intenté agregar a mi manifiesto la opción "content_scripts" esta parte:

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

Y quito la otra parte de mi manifiesto "permisos":

"https://*/"

Solo cuando lo borro, CORB en uno de mis archivos XHR desaparece.

Lo peor de todo es que hay pocos requisitos de XHR en mi código y solo uno de ellos comienza a tener un error CORB (por qué CORB no aparece en otro XHR, no sé; por qué los cambios manifiestos provocaron este error, no sé). Es por eso que inspeccioné todo el código una y otra vez por pocas horas y perdí mucho tiempo.

Answer 14

Tienes que agregar CORS en el lado del servidor:

Si está utilizando nodeJS entonces:

Primero necesitas instalar cors usando el siguiente comando:

npm install cors --save

Ahora agregue el siguiente código a su archivo de inicio de aplicación 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);