"SyntaxError: Unexpected token < in JSON at position 0"

just something basic to check, make sure you dont have anything commented out in the json file

//comments here will not be parsed and throw error

Just to add to the answers, it also happens when your API response includes

<?php{username: 'Some'}

which could be a case when your backend is using PHP.

In python you can use json.Dump(str) before send result to html template.
with this command string convert to correct json format and send to html template. After send this result to JSON.parse(result) , this is correct response and you can use this.

For some, this may help you guys:
I had a similar experience with Wordpress REST API. I even used Postman to check if I had the correct routes or endpoint. I later found out that I accidentally put an "echo" inside my script - hooks:

[Debug & check your console][1]

[Cause of the error][2]

So basically, this means that I printed a value that isn't JSON that is mixed with the script that causes AJAX error - "SyntaxError: Unexpected token r in JSON at position 0"


[1]:

[To see links please register here]

[2]:

[To see links please register here]

This might cause due to your javascript code is looking at some json response and you received something else like text.

Make sure that response is in JSON format otherwise fires this error.

Those who are using `create-react-app` and trying to fetch local json files.

As in `create-react-app`, `webpack-dev-server` is used to handle the request and for every request it serves the `index.html`. So you are getting

>SyntaxError: Unexpected token < in JSON at position 0.

To solve this, you need to eject the app and modify the `webpack-dev-server` configuration file.

You can follow the steps from [here](

[To see links please register here]

).

In my case (backend), I was using res.send(token);

Everything got fixed when I changed to res.send(data);

You may want to check this if everything is working and posting as intended, but the error keeps popping up in your front-end.

The possibilities for this error are overwhelming.

In my case, I found that the issue was adding the `homepage` filed in `package.json` caused the issue.

Worth checking: in `package.json` change:

homepage: "www.example.com"

to

hompage: ""

If anyone else is using fetch from the "Using Fetch" documentation on Web API's in Mozilla:
(This is really useful:

[To see links please register here]

)

fetch(api_url + '/database', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json'
},
body: qrdata //notice that it is not qr but qrdata
})
.then((response) => response.json())
.then((data) => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error); });



This was inside the function:

async function postQRData(qr) {

let qrdata = qr; //this was added to fix it!
//then fetch was here
}

I was passing into my function `qr` what I believed to be an object because `qr` looked like this: `{"name": "Jade", "lname": "Bet", "pet":"cat"}` but I kept getting syntax errors.
When I assigned it to something else: `let qrdata = qr;` it worked.