React Js: Uncaught (in belofte) SyntaxError: Unexpected token < in JSON op positie 0

Ik wil mijn Json-bestand ophalen in react js, hiervoor gebruik ik fetch. Maar er wordt een fout weergegeven

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

Wat zou de fout kunnen zijn, ik krijg geen idee. Ik heb zelfs mijn JSON gevalideerd.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`)
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

Mijn Json (fr.json)

{
  "greeting1": "(fr)choose an emoticon",
  "addPhoto1": "(fr)add photo",
  "close1": "(fr)close"
}

Antwoord 1, autoriteit 100%

Voeg twee koppen Content-Typeen Accepttoe om gelijk te zijn aan application/json.

handleGetJson(){
  console.log("inside handleGetJson");
  fetch(`./fr.json`, {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    })
    .then((response) => response.json())
    .then((messages) => {console.log("messages");});
}

Antwoord 2, autoriteit 31%

De oplossing die voor mij werkte, is dat: –
Ik heb mijn data.json-bestand van src naar de openbare map verplaatst.
Vervolgens fetch API gebruikt om het bestand op te halen.

fetch('./data.json').then(response => {
          console.log(response);
          return response.json();
        }).then(data => {
          // Work with JSON data here
          console.log(data);
        }).catch(err => {
          // Do something for an error here
          console.log("Error Reading data " + err);
        });

Het probleem was dat na het compileren van de react-app het ophaalverzoek naar het bestand zoekt op de URL “http://localhost: 3000/data.json“, wat eigenlijk de openbare map is van mijn react-app. Maar helaas wordt het data.json-bestand van de react-app tijdens het compileren niet verplaatst van src naar de openbare map. Dus we moeten het data.json-bestand expliciet verplaatsen van src naar de openbare map.

Antwoord 3, autoriteit 19%

Deze fout kan worden ontvangen, maar houd er rekening mee dat dit een rode haring kan zijn voor het echte probleem. In mijn geval was er geen probleem met de JSON zoals de foutstatussen, maar er deed zich eerder een 404 voor dat de JSON-gegevens niet op de eerste plaats konden worden verwerkt, wat resulteerde in deze fout.

De oplossing hiervoor was dat om fetchte gebruiken op een .json-bestand in een lokaal project, het .json-bestand moet toegankelijk zijn. Dit kan worden gedaan door het in een map te plaatsen, zoals de map publicin de hoofdmap van het project. Nadat ik het json-bestand naar die map had verplaatst, veranderde de 404 in een 200 en de Unexpected token < in JSON at position 0fout is opgelost.

Antwoord 4, autoriteit 15%

Ik kreeg dezelfde fout, voor mij was het omdat API gewoon een string retourneerde, maar in de fetch-aanroep verwachtte ik json :

response => response.json()

Het retourneren van json van API loste het probleem voor mij op, als uw API geen json zou moeten retourneren, doe dan gewoon niet response.json()

Antwoord 5, autoriteit 3%

Ik had hetzelfde probleem met fetch en besloot over te stappen op axios. Het probleem is meteen opgelost, hier is het codefragment.

var axios = require('axios');
  var config = {
    method: 'get',
    url: 'http://localhost:4000/'
  };
  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error);
  });

Antwoord 6, autoriteit 3%

Ik had hetzelfde probleem, hoewel ik gegevens opvroeg van een andere webserver en niet lokaal. De antwoordstatuscode was 200, maar ik kreeg de gegevens nog steeds niet, ook al werd deze standaard in JSON-indeling verzonden. Het (eenvoudige) probleem was dat ik was vergeten ‘https://’ in de url op te nemen, dus in plaats daarvan gebruikte het in het begin de lokale host.

Antwoord 7, autoriteit 2%

Ik bevestig enkele voorgestelde methoden die ook voor mij hebben gewerkt: je moet je lokale .json-bestand in je openbare map plaatsen waar fetch() naar zoekt (zoekend in http://localhost:3000/)
bijvoorbeeld: ik gebruik deze fetch()in mijn src/App.js-bestand:

componentDidMount(){
  fetch('./data/json-data.json')
  .then ( resp1 => resp1.json() )
  .then ( users1 => this.setState( {cards : users1} ) )
}

dus heb ik public/data/json-data.json

gemaakt

en toen was alles in orde 🙂

Antwoord 8

Het kan gebeuren dat de API (die u gebruikt) de bijbehorende JSON niet verzendt.
U kunt de reactie ervaren als een 404-pagina of iets als HTML/XML-reactie.

Antwoord 9

op uw Promise-antwoord
je hebt gevraagd

response.json() 

Maar dit werkt goed als uw server JSON-reactie in ruil daarvoor verzendt
Vooral als u knooppunt JS op de serverzijde gebruikt

Controleer nogmaals en zorg ervoor dat uw server JSON verzendt als reactie
Zoals gezegd of het is dat de respons het antwoord zou kunnen zijn

res.json(YOUR-DATA-RESPONSE)

Antwoord 10

Soms kan u API BACKEND het contract niet respecteren en duidelijke tekst verzenden (ie. Proxy error: Could not proxy request ..., of <html><body>NOT FOUND</body></html>).

In dit geval moet u beide gevallen behandelen: 1) een geldige JSON-responsfout, of 2) Tekstbetalload als fallback (wanneer reactie-lading geen geldige JSON is).

Ik zou dit voorstellen om beide gevallen te behandelen:

 // parse response as json, or else as txt
  static consumeResponseBodyAs(response, jsonConsumer, txtConsumer) {
    (async () => {
      var responseString = await response.text();
      try{
        if (responseString && typeof responseString === "string"){
         var responseParsed = JSON.parse(responseString);
         if (Api.debug) {
            console.log("RESPONSE(Json)", responseParsed);
         }
         return jsonConsumer(responseParsed);
        }
      } catch(error) {
        // text is not a valid json so we will consume as text
      }
      if (Api.debug) {
        console.log("RESPONSE(Txt)", responseString);
      }
      return txtConsumer(responseString);
    })();
  }

Dan wordt het meer gemakkelijk om de rest-handler af te stemmen:

class Api {
  static debug = true;
  static contribute(entryToAdd) {
    return new Promise((resolve, reject) => {
      fetch('/api/contributions',
        { method: 'POST',
          headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
          body: JSON.stringify(entryToAdd) })
      .catch(reject);
      .then(response => Api.consumeResponseBodyAs(response,
          (json) => {
            if (!response.ok) {
              // valid json: reject will use error.details or error.message or http status
              reject((json && json.details) || (json && json.message) || response.status);
            } else {
              resolve(json);
            }
          },
          (txt) => reject(txt)// not json: reject with text payload
        )
      );
    });
  }

Antwoord 11

Ik had hetzelfde probleem bij het ophalen van de gegevens uit de map “/src”. Het verplaatsen van het bestand naar de “/public” loste het probleem op van.

Antwoord 12

Ik had het .json-bestand in de map src. Gewoon verplaatst naar de map publicen het werkte

Antwoord 13

Probeer het antwoord te converteren naar string en ontleden het vervolgens naar JSON. Dit lost de fout voor mij op. Hieronder staat de code voor hetzelfde.

let resp = JSON.stringify(response);
res = JSON.parse(resp);

Antwoord 14

Ik kreeg de foutmelding.
Ik heb eenvoudig “proxy” toegevoegd aan mijn package.json en de fout is verdwenen.
De fout was er gewoon omdat het API-verzoek werd gedaan op dezelfde poort als de react-app werd uitgevoerd. U moet de proxy opgeven zodat de API-aanroep wordt gedaan naar de poort waar uw backend-server draait.

Antwoord 15

Meestal wordt dit veroorzaakt door een probleem in je React/Client-app. Het toevoegen van deze regel aan uw klant package.jsonlost het op

“proxy”: “http://localhost:5000/“

Opmerking: vervang 5000 door het poortnummer waarop uw server draait

Referentie: Hoe creëer-reageer-app te laten werken met een Node.js back-end API