Respuesta del controlador: error de sintaxis: final inesperado de la entrada cuando se usa el modo: 'no-cors'
Probé una llamada de recuperación de ReactJS a una REST-API y quiero manejar la respuesta. La llamada funciona, recibo una respuesta, que puedo ver en Chrome Dev Tools:
function getAllCourses() {
fetch('http://localhost:8080/course', {
method: 'POST',
mode: 'no-cors',
credentials: 'same-origin',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
objectClass: 'course',
crud: '2'
})
}).then(function (response) {
console.log(response);
return response.json();
}).catch(function (err) {
console.log(err)
});
}
Cuando intento manejar la respuesta, aparece un "Error de sintaxis: final inesperado de la entrada" en
return response.json();
El archivo console.log tiene este aspecto:
Mi respuesta JSON se ve así, es válida, lo verifiqué con jsonlint:
[
{
"0x1": {
"users": [],
"lectures": [],
"owner": "0x2",
"title": "WWI 14 SEA",
"description": null,
"objectClass": "course",
"id": "course_00001"
},
"0x2": {
"username": "system",
"lectures": [],
"course": null,
"solutions": [],
"exercises": [],
"roles": [
"0x3",
"0x4",
"0x5"
],
"objectClass": "user",
"id": "user_00001"
},
"0x3": {
"roleName": "ROLE_ADMIN",
"objectClass": "role",
"id": "role_00001"
},
"0x4": {
"roleName": "ROLE_STUDENT",
"objectClass": "role",
"id": "role_00002"
},
"0x5": {
"roleName": "ROLE_DOCENT",
"objectClass": "role",
"id": "role_00003"
}
}
]
Debe eliminar la mode: 'no-cors'configuración de su solicitud. El modo de configuración no-corses exactamente la causa del problema que tienes.
Una no-corssolicitud genera el tipo de respuesta opaque. El fragmento de registro de la pregunta lo muestra. Opaco significa que el código JavaScript de su interfaz no puede ver el cuerpo de la respuesta ni los encabezados.
https://developer.mozilla.org/en-US/docs/Web/API/Request/mode explica:
no-cors— Es posible que JavaScript no acceda a ninguna propiedad del resultadoResponse
Entonces, el efecto de configurar no-corsel modo es esencialmente decirle a los navegadores: "No permita que el código JavaScript de la interfaz acceda al cuerpo de la respuesta o a los encabezados bajo ninguna circunstancia".
A veces, las personas intentan configurar no-corsel modo cuando una respuesta no incluye el Access-Control-Allow-Originencabezado de respuesta o porque la solicitud activa una verificación previa de CORS , por lo que su navegador realiza una OPTIONSverificación previa.
Pero usar no-corsel modo no es una solución a esos problemas. La solución es:
configure el servidor al que está realizando la solicitud de manera que envíe el
Access-Control-Allow-Originencabezado de respuesta y que manejeOPTIONSlas solicitudeso configurar un proxy CORS usando código de https://github.com/Rob--W/cors-anywhere/ o similar; consulte la sección Cómo utilizar un proxy CORS para solucionar los problemas "Sin encabezado Access-Control-Allow-Origin" de la respuesta en No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado, al intentar obtener datos de una API REST
En tu thendebes verificar si la respuesta es correcta antes de regresar response.json:
.then(function (response) {
if (!response.ok) {
return Promise.reject('some reason');
}
return response.json();
})
Si desea que aparezca el mensaje de error en su promesa rechazada, puede hacer algo como:
.then(function (response) {
if (!response.ok) {
return response.text().then(result => Promise.reject(new Error(result)));
}
return response.json();
})
