Estoy usando fetch() para obtener datos del servidor API. Mi error se ve así:
Uncaught (in promise) SyntaxError: Unexpected end of input at fetch.then.blob.¿Puedes decirme qué estoy haciendo mal?
const weatherAPi ='https://www.metaweather.com/api/location/523920'; fetch(weatherAPi, { mode: 'no-cors' }).then(blob => blob.json()) .then(data => console.log(data)) Una respuesta para una solicitud no-cors a un recurso de origen cruzado tiene un tipo de respuesta de 'opaco' . Si registra la respuesta antes de intentar convertirla en JSON, verá un tipo de "opaco".
Los tipos opacos se enumeran como "severamente restringidos" , como se explica en la especificación de búsqueda en whatwg.org.
Una respuesta filtrada opaca es una respuesta filtrada cuyo tipo es "opaco", la lista de URL es la lista vacía, el estado es 0, el mensaje de estado es la secuencia de bytes vacía, la lista de encabezado está vacía, el cuerpo es nulo y el tráiler está vacío.
Actualmente no se pueden leer cuando el tipo es opaco, como se explica en los documentos de Google sobre el tipo opaco .
Una respuesta opaca es para una solicitud realizada para un recurso en un origen diferente que no devuelve encabezados CORS. Con una respuesta opaca, no podremos leer los datos devueltos ni ver el estado de la solicitud, lo que significa que no podemos verificar si la solicitud fue exitosa o no. Con la implementación actual de fetch(), no es posible realizar solicitudes de recursos de un origen diferente al alcance global de la ventana.
Esto puede depender del entorno o del idioma. Por ejemplo, puede cambiar la configuración de CORS dentro del entorno de Nginx cambiando la configuración de su servidor, o puede especificar encabezados dentro del código de su aplicación, como en PHP.
Recomiendo encarecidamente leer la documentación de Mozilla sobre solicitudes CORS y también Access-Control-Allow-Origin .
Un ejemplo en PHP:
<?php header("Access-Control-Allow-Origin: *"); // "*" could also be a site such as http://www.example.comYo tuve el mismo problema. en mi caso, no fue causado por el tipo de respuesta de 'opaco' como señaló la solución. Este código causa un error con una respuesta vacía, porque 'buscar' no acepta respuestas con un cuerpo vacío:
return fetch(urlToUser, parameters) .then(response => { return response.json() }) .then((data) => { resolve(data) }) .catch((error) => { reject(error) })En cambio, en mi caso esto funciona mejor:
return fetch(urlToUser, parameters) .then(response => { return response.text() }) .then((data) => { resolve(data ? JSON.parse(data) : {}) }) .catch((error) => { reject(error) })Obtener el texto no da el error incluso con el cuerpo vacío. Luego verifique si existen datos y resuelva. Espero que ayude :-)
Muchas buenas respuestas, pero elegí esta:
const response = await fetch(url, { method: 'GET', headers: { Authorization: 'Bearer ' + accessToken } }); const string = await response.text(); const json = string === "" ? {} : JSON.parse(string); return json;