意外令牌 < 在 JSON 中 position 0

Question

If I do curl, the server returns an array of posts objects, like this:

curl http://localhost/api/posts/
[
    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation",
            "user": {
                "first_name": "ben",
                "last_name": "jamin"
            }
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS",
            "user": {
                "first_name": "user",
                "last_name": "two"
            }
        }
    }
]

I tried getting this using the fetch api:

fromServer() {
    console.log('fromServer')
    var headers = new Headers();
    headers.append('Accept', 'application/json');
    let a = fetch('http://test.com/api/posts/', headers)
        .then(function(response) {
                if (response.status !== 200) {
                    console.log('There was a problem. Status Code: ' +  response.status);  
                    return;
                }

                response.json().then(function(data) {  
                    console.log(data);
                });  
            }  
        )  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });
}

But I am getting this error:

Unexpected token < in JSON at position 0

SyntaxError: Unexpected token < in JSON at position 0

How can I solve this problem? Could you please help me. Thank you.

Answer 1

It is clear that you have some syntax error while parsing response into json object.

Remove all the comments from server json file if any.

If it is not: I believe the response body is not json.

You're receiving HTML (or XML) back from the server, but code is enable to parse as JSON. Check the "Network" tab in Chrome dev tools to see contents of the server's response.

Or debug using this code: (as "Jaromanda X" said)

.then(function(response) {
                console.log(response);
                console.log(response.status);
                console.log(response.json());
                console.log(response.text());
                })  
        .catch(function(err) {  
            console.log('Fetch Error :-S', err);  
        });

Answer 2

Please check that your server is giving response in JSON format only. For Associative data you should start your JSON object with " { " not " [ " . So your data should be in below format .

{ "data":[ { "id": 7, "target": { "body": "This is the body", "title": "Airbnb raising a reported $850M at a $30B valuation", "user": { "first_name": "ben", "last_name": "jamin" } } }, { "id": 11, "target": { "body": "This is the body", "title": "Browsing the APISSS", "user": { "first_name": "user", "last_name": "two" } } } ] } And you can get all data from response.data . For more detail follow this link .

Answer 3

The wording of the error message corresponds to what you get from Google Chrome when you run JSON.parse('<...'). I know you said the server is setting Content-Type:application/json, but I am led to believe the response body is actually HTML.

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

with the line console.error(this.props.url, status, err.toString()) underlined. The err was actually thrown within jQuery, and passed to you as a variable err. The reason that line is underlined is simply because that is where you are logging it.

I would suggest that you add to your logging. Looking at the actual xhr (XMLHttpRequest) properties to learn more about the response. Try adding console.warn(xhr.responseText) and you will most likely see the HTML that is being received.

Please correct your code according to above explanation.

Answer 4

so, you can use with start JSON array ;

{

"array": [

    {
        "id": 7,
        "target": {
            "body": "This is the body",
            "title": "Airbnb raising a reported $850M at a $30B valuation",
            "user": {
                "first_name": "ben",
                "last_name": "jamin"
            }
        }
    },
    {
        "id": 11,
        "target": {
            "body": "This is the body",
            "title": "Browsing the APISSS",
            "user": {
                "first_name": "user",
                "last_name": "two"
            }
        }
    }
]

}

Answer 5

So the problem was this: Since I was testing it from the vagrant machine in LAN and in my hosts file I added the ip of vagrant machine as the url (test.com), the device was not able to fetch to that url. After I changed the vagrant machine to port forward and gave the original IP address of the machine, I was able to fetch the json objects. Thank you all for your help.

Answer 6

您可以尝试添加dataType属性，就像dataType: 'html'或dataType: 'text'

Answer 7

Well for me it was because the port was already in use, you can try killing the port by running the below command in cmd(admin mode)

taskkill /F /IM node.exe