1

Tengo un problemilla que me está comiendo la cabeza.

Tengo un fetch, debajo lo dejo, en el que en mi máquina local no tengo ningún problema en recoger el response y el data. En cambio, cuando lo subo al servidor, me da el siguiente error:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

export const DETAIL_URL = 'admin/retrieve-image.php';
componentDidMount() {
    fetch(`${DETAIL_URL}?id=${this.state.idImage}`)
    .then(response => response.json())
    .then(data => {
        this.setState({
            loaded: true,
            imageData: data[0]
        })
    });
}

El JSON que la URL me devuelve es el siguiente:

[{"id":"3","author":"Zander","title":"Rocket Raccoon","path":"images\/1553253832.jpg","guest":"0","source":""}]

Es un JSON válido, así que no se por qué me está arrojando ese error al hacer el fetch.

Añado:

También he probado de incluir en el fetch un segundo parámetro con el id como data:

fetch(DETAIL_URL, {
    method: "GET",
    data: {
        "id": this.state.idImage
    },
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    }
})

Al visualizar lo que devuelve:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Raccoon Junkyard</title><link href="/static/css/main.a05f6569.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.49d07c2a.chunk.js"></script><script src="/static/js/main.2cf2361b.chunk.js"></script></body></html>

PHP de la página que debe devolver el JSON:

<?php
include("db.php");
//header('Access-Control-Allow-Origin: *');
$query = "SELECT * FROM images WHERE id = ".$_GET["id"];
$result = dbQuery($query);

echo json_encode($result);
?>
12
  • por que no logeas la cadena de texto y verifica lo que trae, podrias hacerlo asi: .then(res => res.text()).then(text => console.log(text))
    – dlr
    Commented el 26 mar. 2019 a las 15:46
  • Yo diría que lo mas probable es que cuando subes al servidor, la petición que haces no te está devolviendo un JSON. Puedes verificar también desde el inspector del navegador que uses en la pestaña de Network, ahí puedes ver las peticiones que se hacen y verificar qué respuesta te dio el servidor Commented el 26 mar. 2019 a las 15:47
  • Con cuerdo con @German, Adicional Cheshire si te fijas se esta quejando por el token < el cual no pertenese a un json, seguro que la respuesta es un json? y no un html con json.
    – dlr
    Commented el 26 mar. 2019 a las 15:50
  • @OrlandoDeLaRosa he actualizado lo que devuelve, parece ser que está devolviendo una página. Me resulta extraño ya que tengo otros fetch que no me dan este problema
    – Zander
    Commented el 26 mar. 2019 a las 15:50
  • @GermanAlzate exactamente, me está devolviendo una página html en lugar de un json. En cambio, si entro en la página directamente en el navegador, me devuelve un JSON
    – Zander
    Commented el 26 mar. 2019 a las 15:55

3 respuestas 3

2

Como bien decía @gbianchi, la URL no era la correcta.

Al estar en una ruta mi-pagina.com/detalle, la constante DETAIL_URL = 'admin/retrieve-image.php'; apuntaba a la dirección mi-pagina.com/detalle/admin/retrieve-image.php en lugar de mi-pagina.com/admin/retrieve-image.php

La solución fue añadir una ruta absoluta a la URL del fetch.

DETAIL_URL = '/admin/retrieve-image.php';

3
  • 1
    Si lo has arreglado de este modo, recuerda marca tu misma respuesta como solución válida. Así, los siguientes que vengan buscando solución o pretendan ayudar verán que ya está solucionado. Un saludo. Commented el 26 mar. 2019 a las 17:00
  • @Emerita lo se, para marcar como respuesta correcta una propia, hay que esperar 2 días
    – Zander
    Commented el 26 mar. 2019 a las 17:27
  • Ya, jejejejeje, mas que nada, lo digo para que no se te pase. Que así mantenemos un orden, dentro del caos que tenemos. Un saludo. Commented el 26 mar. 2019 a las 17:28
0

Es un problema de conversión a formato JSON. Asegura que response contiene un JSON.

Puedes comprobar los valores de esta manera:

.then(response => response.text())
.then(data => {
    var check1 = data;
    var check2 = JSON.parse(data);
    console.log(check1);
    console.log(check2);
    this.setState({
        loaded: true,
        imageData: data[0]
    })
});

Si la comprobación es correcta cambia response.json() por response.text() y usa conversión manual con JSON.parse(data);

0
0

Pruebe con esto señor

$query = "SELECT * FROM images WHERE id = ".$_GET["id"];
$result = dbQuery($query);

header('Content-type: application/json');
echo json_encode($result);
1
  • No hay suerte con ello, gracias por comentar.
    – Zander
    Commented el 26 mar. 2019 a las 16:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.