Related
I am getting this error, it points to client.js line 21. It is the second .then of the fetch(create.php).
The first response returns 200. So, not sure how to fix it. The whole code so far is as extracted from demo instructions. https://stripe.com/docs/payments/integration-builder
See browser console info:
jquery-migrate.min.js?ver=3.3.2:2 JQMIGRATE: Migrate is installed, version 3.3.2
?ver=3.0.0:1 You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.
value # ?ver=3.0.0:1
Ec # ?ver=3.0.0:1
Sc # ?ver=3.0.0:1
(anonymous) # client.js:3
client.js:18 Response {type: "basic", url: "http://amore-paraiso.local/wp-content/plugins/sm-amore-stripe/create.php", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "basic"url: "http://amore-paraiso.local/wp-content/plugins/sm-amore-stripe/create.php"__proto__: Response
content-tss.js:1 TSS: content-tss.js loaded: https://js.stripe.com/v3/m-outer-59cdd15d8db95826a41100f00b589171.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
content-ads.js:1 INS: content-ads.js loaded: https://js.stripe.com/v3/m-outer-59cdd15d8db95826a41100f00b589171.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
VM353:4 hosted page injected
(index):1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Promise.then (async)
(anonymous) # client.js:21
content-tss.js:1 TSS: content-tss.js loaded: https://m.stripe.network/inner.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
content-ads.js:1 INS: content-ads.js loaded: https://m.stripe.network/inner.html#url=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&title=Bride%20%26%20Groom%20%E2%80%93%20Amore%20Paraiso&referrer=http%3A%2F%2Famore-paraiso.local%2Fexperiences%2Fbride-groom%2F%3F&muid=bb6c8b5b-6e39-4451-91e7-10092d15ec8824d547&sid=3aa75c2f-71f2-493c-ae1b-8f76050ebb800df509&version=6&preview=false
Most likely scenario is that your create.php is encountering an error and returning an error page as HTML (hence the < at position 0). You need to debug your create.php to understand where it is failing, then correct that. Check your Stripe developer logs to see if the API request is made successfully.
I've had simular problems passing data from php to js. Instead of immediately parsing the data, just do console.log(this.responseText) ; and it will show you the content. Normally it's an error in your php code and it will tell you where the error is and what's causing it for you to fix
I've encountered this error a few times.
You aren't actually getting back JSON as a response, and so the attempt to parse that response as JSON is failing.
If you are doing something like result.json() you can instead log result.text() and have a look at what is actually being returned.
PHP has a habit of catching people out and returning HTML rather than JSON.
Here is a massively popular Stack Overflow thread on the topic:
SyntaxError: Unexpected token < in JSON at position 0
Edit because reviewed:
Your error is appearing here
.then(function(result) {
return result.json();
})
So if you want to make sure this is JSON you can check the response content type like below. Taken from MDN
fetch("/create-payment-intent", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(purchase)
})
.then(result => {
const contentType = result.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
// Or do something else with the result to get it into JSON
throw new TypeError("Oops, we haven't got JSON!");
}
return result.json();
}
It turned out the error was on the require './stripe-php/init.php'; on the create.php file.
As I am developing it with Wordpress I had it as require plugin_dir_url(__FILE__) . 'stripe-php/init.php';.
Summary:
Make sure the path to require stripe-php/init.php is correct, as below:
require './stripe-php/init.php';
Thanks to #jason who recommended checking the Network tab.
In a React app component which handles Facebook-like content feeds, I am running into an error:
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0
I ran into a similar error which turned out to be a typo in the HTML within the render function, but that doesn't seem to be the case here.
More confusingly, I rolled the code back to an earlier, known-working version and I'm still getting the error.
Feed.js:
import React from 'react';
var ThreadForm = React.createClass({
getInitialState: function () {
return {author: '',
text: '',
included: '',
victim: ''
}
},
handleAuthorChange: function (e) {
this.setState({author: e.target.value})
},
handleTextChange: function (e) {
this.setState({text: e.target.value})
},
handleIncludedChange: function (e) {
this.setState({included: e.target.value})
},
handleVictimChange: function (e) {
this.setState({victim: e.target.value})
},
handleSubmit: function (e) {
e.preventDefault()
var author = this.state.author.trim()
var text = this.state.text.trim()
var included = this.state.included.trim()
var victim = this.state.victim.trim()
if (!text || !author || !included || !victim) {
return
}
this.props.onThreadSubmit({author: author,
text: text,
included: included,
victim: victim
})
this.setState({author: '',
text: '',
included: '',
victim: ''
})
},
render: function () {
return (
<form className="threadForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange} />
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange} />
<input
type="text"
placeholder="Name your victim"
value={this.state.victim}
onChange={this.handleVictimChange} />
<input
type="text"
placeholder="Who can see?"
value={this.state.included}
onChange={this.handleIncludedChange} />
<input type="submit" value="Post" />
</form>
)
}
})
var ThreadsBox = React.createClass({
loadThreadsFromServer: function () {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
handleThreadSubmit: function (thread) {
var threads = this.state.data
var newThreads = threads.concat([thread])
this.setState({data: newThreads})
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: thread,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
this.setState({data: threads})
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
getInitialState: function () {
return {data: []}
},
componentDidMount: function () {
this.loadThreadsFromServer()
setInterval(this.loadThreadsFromServer, this.props.pollInterval)
},
render: function () {
return (
<div className="threadsBox">
<h1>Feed</h1>
<div>
<ThreadForm onThreadSubmit={this.handleThreadSubmit} />
</div>
</div>
)
}
})
module.exports = ThreadsBox
In Chrome developer tools, the error seems to be coming from this function:
loadThreadsFromServer: function loadThreadsFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
with the line console.error(this.props.url, status, err.toString() underlined.
Since it looks like the error seems to have something to do with pulling JSON data from the server, I tried starting from a blank db, but the error persists. The error seems to be called in an infinite loop presumably as React continuously tries to connect to the server and eventually crashes the browser.
EDIT:
I've checked the server response with Chrome dev tools and Chrome REST client, and the data appears to be proper JSON.
EDIT 2:
It appears that though the intended API endpoint is indeed returning the correct JSON data and format, React is polling http://localhost:3000/?_=1463499798727 instead of the expected http://localhost:3001/api/threads.
I am running a webpack hot-reload server on port 3000 with the express app running on port 3001 to return the backend data. What's frustrating here is that this was working correctly the last time I worked on it and can't find what I could have possibly changed to break it.
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.
Feed.js:94 undefined "parsererror" "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.
You're receiving HTML (or XML) back from the server, but the dataType: json is telling jQuery to parse as JSON. Check the "Network" tab in Chrome dev tools to see contents of the server's response.
SyntaxError: Unexpected token < in JSON at position 0
You are getting an HTML file (or XML) instead of json.
Html files begin with <!DOCTYPE html>.
I "achieved" this error by forgetting the https:// in my fetch method:
fetch(`/api.github.com/users/${login}`)
.then(response => response.json())
.then(setData);
I verified my hunch:
I logged the response as text instead of JSON.
fetch(`/api.github.com/users/${login}`)
.then(response => response.text())
.then(text => console.log(text))
.then(setData);
Yep, an html file.
Solution:
I fixed the error by adding back the https:// in my fetch method.
fetch(`https://api.github.com/users/${login}`)
.then(response => response.json())
.then(setData)
.catch(error => (console.log(error)));
This ended up being a permissions problem for me. I was trying to access a url I didn't have authorization for with cancan, so the url was switched to users/sign_in. the redirected url responds to html, not json. The first character in a html response is <.
In my case, I was getting this running webpack. It turned out to be corrupted somewhere in the local node_modules dir.
rm -rf node_modules
npm install
...was enough to get it working right again.
I experienced this error "SyntaxError: Unexpected token m in JSON at position", where the token 'm' can be any other characters.
It turned out that I missed one of the double quotes in the JSON object when I was using RESTconsole for DB test, as {"name: "math"}. The correct one should be {"name": "math"}.
It took me a lot effort to figure out this clumsy mistake. I am afraid others will run into similar issues.
This error occurs when you define the response as application/json and you are getting a HTML as a response. Basically, this happened when you are writing server side script for specific url with a response of JSON but the error format is in HTML.
I was facing the same issue.
I removed the dataType:'json' from the $.ajax method.
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.
In a nutshell, if you're getting this error or a similar error, that means only one thing: Someplace in our codebase, we were expecting a valid JSON format to process, and we didn't get one. For example,
var string = "some string";
JSON.parse(string)
will throw an error, saying
Uncaught SyntaxError: Unexpected token s in JSON at position 0
Because, the first character in string is s & it's not a valid JSON now. This can throw error in between also. like:
var invalidJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(invalidJSON)
Will throw error:
VM598:1 Uncaught SyntaxError: Unexpected token v in JSON at position 36
because we intentionally missed a quote in the JSON string invalidJSON at position 36.
And if you fix that:
var validJSON= '{"foo" : "bar", "missedquotehere" : "value" }';
JSON.parse(validJSON)
will give you an object in JSON.
This error can be thrown in any place & in any framework/library. Most of the time you may be reading a network response which is not valid JSON. So steps of debugging this issue can be like:
curl or hit the actual API you're calling.
Log/Copy the response and try to parse it with JSON.parse. If you're getting error, fix it.
If not, make sure your code is not mutating/changing the original response.
I my case the error was a result of me not assigning my return value to a variable. The following caused the error message:
return new JavaScriptSerializer().Serialize("hello");
I changed it to:
string H = "hello";
return new JavaScriptSerializer().Serialize(H);
Without the variable JSON is unable to properly format the data.
For future googlers:
This message will be generated if the server-side function crashes.
Or if the server-side function doesn't even exist ( i.e. Typo in function name ).
So - suppose you are using a GET request... and everything looks perfect and you've triple-checked everything...
Check that GET string one more time. Mine was:
'/theRouteIWant&someVar=Some value to send'
should be
'/theRouteIWant?someVar=Some value to send'
^
CrAsH ! ( ... invisibly, on the server ...)
Node/Express sends back the incredibly helpful message:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
In my case, for an Azure hosted Angular 2/4 site, my API call to mySite/api/... was redirecting due to mySite routing issues. So, it was returning the HTML from the redirected page instead of the api JSON. I added an exclusion in a web.config file for the api path.
I was not getting this error when developing locally because the Site and API were on different ports. There is probably a better way to do this ... but it worked.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<!-- ignore static files -->
<rule name="AngularJS Conditions" stopProcessing="true">
<match url="(app/.*|css/.*|fonts/.*|assets/.*|images/.*|js/.*|api/.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="None" />
</rule>
<!--remaining all other url's point to index.html file -->
<rule name="AngularJS Wildcard" enabled="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
2022 UPDATE: having written this several years ago. I'd call this suggestion more of a workaround - a direct fix. The better hosting pattern is to simply not try to host these api paths under your website path; rather, host them on separate base URLs entirely. For my use case example, the API and Web path would be entirely separate Azure Web Services and would get different URL endpoints.
My problem was that I was getting the data back in a string which was not in a proper JSON format, which I was then trying to parse it. simple example: JSON.parse('{hello there}') will give an error at h. In my case the callback url was returning an unnecessary character before the objects: employee_names([{"name":.... and was getting error at e at 0. My callback URL itself had an issue which when fixed, returned only objects.
On a general level this error occurs when a JSON object is parsed that has syntax errors in it. Think of something like this, where the message property contains unescaped double quotes:
{
"data": [{
"code": "1",
"message": "This message has "unescaped" quotes, which is a JSON syntax error."
}]
}
If you have JSON in your app somewhere then it's good to run it through JSONLint to verify that it doesn't have a syntax error. Usually this isn't the case though in my experience, it's usually JSON returned from an API that's the culprit.
When an XHR request is made to an HTTP API that returns a response with a Content-Type:application/json; charset=UTF-8 header which contains invalid JSON in the response body you'll see this error.
If a server-side API controller is improperly handling a syntax error, and it's being printed out as part of the response, that will break the structure of JSON returned. A good example of this would be an API response containing a PHP Warning or Notice in the response body:
<b>Notice</b>: Undefined variable: something in <b>/path/to/some-api-controller.php</b> on line <b>99</b><br />
{
"success": false,
"data": [{ ... }]
}
95% of the time this is the source of the issue for me, and though it's somewhat addressed here in the other responses I didn't feel it was clearly described. Hopefully this helps, if you're looking for a handy way to track down which API response contains a JSON syntax error I've written an Angular module for that.
Here's the module:
/**
* Track Incomplete XHR Requests
*
* Extend httpInterceptor to track XHR completions and keep a queue
* of our HTTP requests in order to find if any are incomplete or
* never finish, usually this is the source of the issue if it's
* XHR related
*/
angular.module( "xhrErrorTracking", [
'ng',
'ngResource'
] )
.factory( 'xhrErrorTracking', [ '$q', function( $q ) {
var currentResponse = false;
return {
response: function( response ) {
currentResponse = response;
return response || $q.when( response );
},
responseError: function( rejection ) {
var requestDesc = currentResponse.config.method + ' ' + currentResponse.config.url;
if ( currentResponse.config.params ) requestDesc += ' ' + JSON.stringify( currentResponse.config.params );
console.warn( 'JSON Errors Found in XHR Response: ' + requestDesc, currentResponse );
return $q.reject( rejection );
}
};
} ] )
.config( [ '$httpProvider', function( $httpProvider ) {
$httpProvider.interceptors.push( 'xhrErrorTracking' );
} ] );
More details can be found in the blog article referenced above, I haven't posted everything found there here as it's probably not all relevant.
Make sure that response is in JSON format otherwise fires this error.
I got the same error while calling an API in React using the fetch API with the POST method.
Before:
fetch('/api/v1/tour',{
method:"POST",
headers:{"Content-type":"json/application"},
body:JSON.stringify(info)
})
.then((response)=>response.json())
.then((json)=>{
if(json.status === 'success')
alert(json.message)
else
console.log('something went wrong :(')
}).catch(e=>console.log(e))
I resolved the error by changing the headers to {"Content-type":"application/json"}:
After:
fetch('/api/v1/tour',{
method:"POST",
headers:{"Content-type":"application/json"},
body:JSON.stringify(info)
})
.then((response)=>response.json())
.then((json)=>{
if(json.status === 'success')
alert(json.message)
else
console.log('something went wrong :(')
}).catch(e=>console.log(e))
I had the same error message following a tutorial. Our issue seems to be 'url: this.props.url' in the ajax call. In React.DOM when you are creating your element, mine looks like this.
ReactDOM.render(
<CommentBox data="/api/comments" pollInterval={2000}/>,
document.getElementById('content')
);
Well, this CommentBox does not have a url in its props, just data. When I switched url: this.props.url -> url: this.props.data, it made the right call to the server and I got back the expected data.
I hope it helps.
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: ""
Malformed JSON or HTML instead of JSON is the underlying cause of this issue, as described by the other answers, however in my case I couldn't reliably replicate this error, as if the server was sometimes returning valid JSON, and other times returning something else like an HTML error page or similar.
In order to avoid it breaking the page altogether, I resorted to manually trying to parse the returned content, and share it in case it helps anyone else resolve it for them.
const url = "https://my.server.com/getData";
fetch(url).then(response => {
if (!response.ok) return; // call failed
response.text().then(shouldBeJson => { // get the text-only of the response
let json = null;
try {
json = JSON.parse(shouldBeJson); // try to parse that text
} catch (e) {
console.warn(e); // json parsing failed
return;
};
if (!json) return; // extra check just to make sure we have something now.
// do something with my json object
});
});
While this obviously doesn't resolve the root cause of the issue, it can still help to handle the issue a bit more gracefully and take some kind of reasonable action in instances when it fails.
For the React app made by CRA there are two main problems we might face while fetching the JSON data of any <dummy.json>
file.
I have my dummy.json file in my project and am trying to fetch the JSON data from that file but I got two errors:
"SyntaxError: Unexpected token < in JSON at position 0 .
I got an HTML file rather than actual JSON Data in the response in the Network tab in Chrome or any browser.
Here are the main two reasons behind that which solved my issue.
Your JSON data is invalid in your JSON file.
It might be that the JSON file did not load properly for this so you just restart your React server. This is my issue, within React.
React direct running or access the public folder not the src folder.
How I solved it:
I moved my file into the public folder and access is directly in any file of the src folder.
Making a REST call in the Redux action.js:
export const fetchDummy = ()=>{
return (dispatch)=>{
dispatch(fetchDummyRequest());
fetch('./assets/DummyData.json')
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
})
.then(result => {
dispatch(fetchDummySuccess(result))
})
.catch(function (err) {
dispatch(fetchDummyFailure(err))
})
}
}
This might be old. But it just occurred in Angular where the content type for request and response were different in my code. So check headers for
let headers = new Headers({
'Content-Type': 'application/json',
**Accept**: 'application/json'
});
in React axios
axios({
method:'get',
url:'http:// ',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
responseType:'json'
})
jQuery Ajax:
$.ajax({
url: this.props.url,
dataType: 'json',
**headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},**
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
After spending a lot of time with this, I found out that in my case the problem was having "homepage" defined on my package.json file made my app not work on firebase (same 'token' error).
I created my react app using create-react-app, then I used the firebase guide on the READ.me file to deploy to github pages, realized I had to do extra work for the router to work, and switched to firebase. github guide had added the homepage key on package.json and caused the deploy issue.
Protip: Testing json on a local Node.js server? Make sure you don't already have something routing to that path
'/:url(app|assets|stuff|etc)';
For me, this happened when one of the properties on the object I was returning as JSON threw an exception.
public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
get
{
var count = 0;
//throws when Clients is null
foreach (var c in Clients) {
count += c.Value;
}
return count;
}
}
Adding a null check, fixed it for me:
public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
get
{
var count = 0;
if (Clients != null) {
foreach (var c in Clients) {
count += c.Value;
}
}
return count;
}
}
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
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
Cause of the error
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"
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.
In my Case there was problem with "Bearer" in header ideally it should be "Bearer "(space after the end character) but in my case it was "Bearer" there was no space after the character. Hope it helps some one!
In a React app component which handles Facebook-like content feeds, I am running into an error:
Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0
I ran into a similar error which turned out to be a typo in the HTML within the render function, but that doesn't seem to be the case here.
More confusingly, I rolled the code back to an earlier, known-working version and I'm still getting the error.
Feed.js:
import React from 'react';
var ThreadForm = React.createClass({
getInitialState: function () {
return {author: '',
text: '',
included: '',
victim: ''
}
},
handleAuthorChange: function (e) {
this.setState({author: e.target.value})
},
handleTextChange: function (e) {
this.setState({text: e.target.value})
},
handleIncludedChange: function (e) {
this.setState({included: e.target.value})
},
handleVictimChange: function (e) {
this.setState({victim: e.target.value})
},
handleSubmit: function (e) {
e.preventDefault()
var author = this.state.author.trim()
var text = this.state.text.trim()
var included = this.state.included.trim()
var victim = this.state.victim.trim()
if (!text || !author || !included || !victim) {
return
}
this.props.onThreadSubmit({author: author,
text: text,
included: included,
victim: victim
})
this.setState({author: '',
text: '',
included: '',
victim: ''
})
},
render: function () {
return (
<form className="threadForm" onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Your name"
value={this.state.author}
onChange={this.handleAuthorChange} />
<input
type="text"
placeholder="Say something..."
value={this.state.text}
onChange={this.handleTextChange} />
<input
type="text"
placeholder="Name your victim"
value={this.state.victim}
onChange={this.handleVictimChange} />
<input
type="text"
placeholder="Who can see?"
value={this.state.included}
onChange={this.handleIncludedChange} />
<input type="submit" value="Post" />
</form>
)
}
})
var ThreadsBox = React.createClass({
loadThreadsFromServer: function () {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
handleThreadSubmit: function (thread) {
var threads = this.state.data
var newThreads = threads.concat([thread])
this.setState({data: newThreads})
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: thread,
success: function (data) {
this.setState({data: data})
}.bind(this),
error: function (xhr, status, err) {
this.setState({data: threads})
console.error(this.props.url, status, err.toString())
}.bind(this)
})
},
getInitialState: function () {
return {data: []}
},
componentDidMount: function () {
this.loadThreadsFromServer()
setInterval(this.loadThreadsFromServer, this.props.pollInterval)
},
render: function () {
return (
<div className="threadsBox">
<h1>Feed</h1>
<div>
<ThreadForm onThreadSubmit={this.handleThreadSubmit} />
</div>
</div>
)
}
})
module.exports = ThreadsBox
In Chrome developer tools, the error seems to be coming from this function:
loadThreadsFromServer: function loadThreadsFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
with the line console.error(this.props.url, status, err.toString() underlined.
Since it looks like the error seems to have something to do with pulling JSON data from the server, I tried starting from a blank db, but the error persists. The error seems to be called in an infinite loop presumably as React continuously tries to connect to the server and eventually crashes the browser.
EDIT:
I've checked the server response with Chrome dev tools and Chrome REST client, and the data appears to be proper JSON.
EDIT 2:
It appears that though the intended API endpoint is indeed returning the correct JSON data and format, React is polling http://localhost:3000/?_=1463499798727 instead of the expected http://localhost:3001/api/threads.
I am running a webpack hot-reload server on port 3000 with the express app running on port 3001 to return the backend data. What's frustrating here is that this was working correctly the last time I worked on it and can't find what I could have possibly changed to break it.
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.
Feed.js:94 undefined "parsererror" "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.
You're receiving HTML (or XML) back from the server, but the dataType: json is telling jQuery to parse as JSON. Check the "Network" tab in Chrome dev tools to see contents of the server's response.
SyntaxError: Unexpected token < in JSON at position 0
You are getting an HTML file (or XML) instead of json.
Html files begin with <!DOCTYPE html>.
I "achieved" this error by forgetting the https:// in my fetch method:
fetch(`/api.github.com/users/${login}`)
.then(response => response.json())
.then(setData);
I verified my hunch:
I logged the response as text instead of JSON.
fetch(`/api.github.com/users/${login}`)
.then(response => response.text())
.then(text => console.log(text))
.then(setData);
Yep, an html file.
Solution:
I fixed the error by adding back the https:// in my fetch method.
fetch(`https://api.github.com/users/${login}`)
.then(response => response.json())
.then(setData)
.catch(error => (console.log(error)));
This ended up being a permissions problem for me. I was trying to access a url I didn't have authorization for with cancan, so the url was switched to users/sign_in. the redirected url responds to html, not json. The first character in a html response is <.
In my case, I was getting this running webpack. It turned out to be corrupted somewhere in the local node_modules dir.
rm -rf node_modules
npm install
...was enough to get it working right again.
I experienced this error "SyntaxError: Unexpected token m in JSON at position", where the token 'm' can be any other characters.
It turned out that I missed one of the double quotes in the JSON object when I was using RESTconsole for DB test, as {"name: "math"}. The correct one should be {"name": "math"}.
It took me a lot effort to figure out this clumsy mistake. I am afraid others will run into similar issues.
This error occurs when you define the response as application/json and you are getting a HTML as a response. Basically, this happened when you are writing server side script for specific url with a response of JSON but the error format is in HTML.
I was facing the same issue.
I removed the dataType:'json' from the $.ajax method.
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.
In a nutshell, if you're getting this error or a similar error, that means only one thing: Someplace in our codebase, we were expecting a valid JSON format to process, and we didn't get one. For example,
var string = "some string";
JSON.parse(string)
will throw an error, saying
Uncaught SyntaxError: Unexpected token s in JSON at position 0
Because, the first character in string is s & it's not a valid JSON now. This can throw error in between also. like:
var invalidJSON= '{"foo" : "bar", "missedquotehere : "value" }';
JSON.parse(invalidJSON)
Will throw error:
VM598:1 Uncaught SyntaxError: Unexpected token v in JSON at position 36
because we intentionally missed a quote in the JSON string invalidJSON at position 36.
And if you fix that:
var validJSON= '{"foo" : "bar", "missedquotehere" : "value" }';
JSON.parse(validJSON)
will give you an object in JSON.
This error can be thrown in any place & in any framework/library. Most of the time you may be reading a network response which is not valid JSON. So steps of debugging this issue can be like:
curl or hit the actual API you're calling.
Log/Copy the response and try to parse it with JSON.parse. If you're getting error, fix it.
If not, make sure your code is not mutating/changing the original response.
I my case the error was a result of me not assigning my return value to a variable. The following caused the error message:
return new JavaScriptSerializer().Serialize("hello");
I changed it to:
string H = "hello";
return new JavaScriptSerializer().Serialize(H);
Without the variable JSON is unable to properly format the data.
For future googlers:
This message will be generated if the server-side function crashes.
Or if the server-side function doesn't even exist ( i.e. Typo in function name ).
So - suppose you are using a GET request... and everything looks perfect and you've triple-checked everything...
Check that GET string one more time. Mine was:
'/theRouteIWant&someVar=Some value to send'
should be
'/theRouteIWant?someVar=Some value to send'
^
CrAsH ! ( ... invisibly, on the server ...)
Node/Express sends back the incredibly helpful message:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
In my case, for an Azure hosted Angular 2/4 site, my API call to mySite/api/... was redirecting due to mySite routing issues. So, it was returning the HTML from the redirected page instead of the api JSON. I added an exclusion in a web.config file for the api path.
I was not getting this error when developing locally because the Site and API were on different ports. There is probably a better way to do this ... but it worked.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<!-- ignore static files -->
<rule name="AngularJS Conditions" stopProcessing="true">
<match url="(app/.*|css/.*|fonts/.*|assets/.*|images/.*|js/.*|api/.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="None" />
</rule>
<!--remaining all other url's point to index.html file -->
<rule name="AngularJS Wildcard" enabled="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
2022 UPDATE: having written this several years ago. I'd call this suggestion more of a workaround - a direct fix. The better hosting pattern is to simply not try to host these api paths under your website path; rather, host them on separate base URLs entirely. For my use case example, the API and Web path would be entirely separate Azure Web Services and would get different URL endpoints.
My problem was that I was getting the data back in a string which was not in a proper JSON format, which I was then trying to parse it. simple example: JSON.parse('{hello there}') will give an error at h. In my case the callback url was returning an unnecessary character before the objects: employee_names([{"name":.... and was getting error at e at 0. My callback URL itself had an issue which when fixed, returned only objects.
On a general level this error occurs when a JSON object is parsed that has syntax errors in it. Think of something like this, where the message property contains unescaped double quotes:
{
"data": [{
"code": "1",
"message": "This message has "unescaped" quotes, which is a JSON syntax error."
}]
}
If you have JSON in your app somewhere then it's good to run it through JSONLint to verify that it doesn't have a syntax error. Usually this isn't the case though in my experience, it's usually JSON returned from an API that's the culprit.
When an XHR request is made to an HTTP API that returns a response with a Content-Type:application/json; charset=UTF-8 header which contains invalid JSON in the response body you'll see this error.
If a server-side API controller is improperly handling a syntax error, and it's being printed out as part of the response, that will break the structure of JSON returned. A good example of this would be an API response containing a PHP Warning or Notice in the response body:
<b>Notice</b>: Undefined variable: something in <b>/path/to/some-api-controller.php</b> on line <b>99</b><br />
{
"success": false,
"data": [{ ... }]
}
95% of the time this is the source of the issue for me, and though it's somewhat addressed here in the other responses I didn't feel it was clearly described. Hopefully this helps, if you're looking for a handy way to track down which API response contains a JSON syntax error I've written an Angular module for that.
Here's the module:
/**
* Track Incomplete XHR Requests
*
* Extend httpInterceptor to track XHR completions and keep a queue
* of our HTTP requests in order to find if any are incomplete or
* never finish, usually this is the source of the issue if it's
* XHR related
*/
angular.module( "xhrErrorTracking", [
'ng',
'ngResource'
] )
.factory( 'xhrErrorTracking', [ '$q', function( $q ) {
var currentResponse = false;
return {
response: function( response ) {
currentResponse = response;
return response || $q.when( response );
},
responseError: function( rejection ) {
var requestDesc = currentResponse.config.method + ' ' + currentResponse.config.url;
if ( currentResponse.config.params ) requestDesc += ' ' + JSON.stringify( currentResponse.config.params );
console.warn( 'JSON Errors Found in XHR Response: ' + requestDesc, currentResponse );
return $q.reject( rejection );
}
};
} ] )
.config( [ '$httpProvider', function( $httpProvider ) {
$httpProvider.interceptors.push( 'xhrErrorTracking' );
} ] );
More details can be found in the blog article referenced above, I haven't posted everything found there here as it's probably not all relevant.
Make sure that response is in JSON format otherwise fires this error.
I got the same error while calling an API in React using the fetch API with the POST method.
Before:
fetch('/api/v1/tour',{
method:"POST",
headers:{"Content-type":"json/application"},
body:JSON.stringify(info)
})
.then((response)=>response.json())
.then((json)=>{
if(json.status === 'success')
alert(json.message)
else
console.log('something went wrong :(')
}).catch(e=>console.log(e))
I resolved the error by changing the headers to {"Content-type":"application/json"}:
After:
fetch('/api/v1/tour',{
method:"POST",
headers:{"Content-type":"application/json"},
body:JSON.stringify(info)
})
.then((response)=>response.json())
.then((json)=>{
if(json.status === 'success')
alert(json.message)
else
console.log('something went wrong :(')
}).catch(e=>console.log(e))
I had the same error message following a tutorial. Our issue seems to be 'url: this.props.url' in the ajax call. In React.DOM when you are creating your element, mine looks like this.
ReactDOM.render(
<CommentBox data="/api/comments" pollInterval={2000}/>,
document.getElementById('content')
);
Well, this CommentBox does not have a url in its props, just data. When I switched url: this.props.url -> url: this.props.data, it made the right call to the server and I got back the expected data.
I hope it helps.
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: ""
Malformed JSON or HTML instead of JSON is the underlying cause of this issue, as described by the other answers, however in my case I couldn't reliably replicate this error, as if the server was sometimes returning valid JSON, and other times returning something else like an HTML error page or similar.
In order to avoid it breaking the page altogether, I resorted to manually trying to parse the returned content, and share it in case it helps anyone else resolve it for them.
const url = "https://my.server.com/getData";
fetch(url).then(response => {
if (!response.ok) return; // call failed
response.text().then(shouldBeJson => { // get the text-only of the response
let json = null;
try {
json = JSON.parse(shouldBeJson); // try to parse that text
} catch (e) {
console.warn(e); // json parsing failed
return;
};
if (!json) return; // extra check just to make sure we have something now.
// do something with my json object
});
});
While this obviously doesn't resolve the root cause of the issue, it can still help to handle the issue a bit more gracefully and take some kind of reasonable action in instances when it fails.
For the React app made by CRA there are two main problems we might face while fetching the JSON data of any <dummy.json>
file.
I have my dummy.json file in my project and am trying to fetch the JSON data from that file but I got two errors:
"SyntaxError: Unexpected token < in JSON at position 0 .
I got an HTML file rather than actual JSON Data in the response in the Network tab in Chrome or any browser.
Here are the main two reasons behind that which solved my issue.
Your JSON data is invalid in your JSON file.
It might be that the JSON file did not load properly for this so you just restart your React server. This is my issue, within React.
React direct running or access the public folder not the src folder.
How I solved it:
I moved my file into the public folder and access is directly in any file of the src folder.
Making a REST call in the Redux action.js:
export const fetchDummy = ()=>{
return (dispatch)=>{
dispatch(fetchDummyRequest());
fetch('./assets/DummyData.json')
.then(response => {
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
return response.json();
})
.then(result => {
dispatch(fetchDummySuccess(result))
})
.catch(function (err) {
dispatch(fetchDummyFailure(err))
})
}
}
This might be old. But it just occurred in Angular where the content type for request and response were different in my code. So check headers for
let headers = new Headers({
'Content-Type': 'application/json',
**Accept**: 'application/json'
});
in React axios
axios({
method:'get',
url:'http:// ',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
responseType:'json'
})
jQuery Ajax:
$.ajax({
url: this.props.url,
dataType: 'json',
**headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},**
cache: false,
success: function (data) {
this.setState({ data: data });
}.bind(this),
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
After spending a lot of time with this, I found out that in my case the problem was having "homepage" defined on my package.json file made my app not work on firebase (same 'token' error).
I created my react app using create-react-app, then I used the firebase guide on the READ.me file to deploy to github pages, realized I had to do extra work for the router to work, and switched to firebase. github guide had added the homepage key on package.json and caused the deploy issue.
Protip: Testing json on a local Node.js server? Make sure you don't already have something routing to that path
'/:url(app|assets|stuff|etc)';
For me, this happened when one of the properties on the object I was returning as JSON threw an exception.
public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
get
{
var count = 0;
//throws when Clients is null
foreach (var c in Clients) {
count += c.Value;
}
return count;
}
}
Adding a null check, fixed it for me:
public Dictionary<string, int> Clients { get; set; }
public int CRCount
{
get
{
var count = 0;
if (Clients != null) {
foreach (var c in Clients) {
count += c.Value;
}
}
return count;
}
}
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
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
Cause of the error
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"
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.
In my Case there was problem with "Bearer" in header ideally it should be "Bearer "(space after the end character) but in my case it was "Bearer" there was no space after the character. Hope it helps some one!
This problem annoys me, because I know it has something to do with me not understanding the issue properly - which makes it really hard to track down answers for, despite spending hours reading and trying different things.
My question/problem is this, I am saving a user to a mongodb database when they signup, my schema doesn't allow for duplicate emails, and sends me back an error. I am able to console log the error in the terminal, but I am having problems sending it back to the client. Or I'm having a problem doing something with it, if it comes back, I'm not too sure where in those two steps I am losing access to the error message.
Here is my POST route for saving the user:
router.post('/users', (req, res) => {
let body = _.pick(req.body, ['email', 'password']);
let user = new User(body);
user.save().then(() => { // this all works and will save the user, if there are no errors
return user.generateAuthToken();
}).then((token) => {
res.header('Authorization', `Bearer ${token}`).send(user);
}).catch((err) => { // This is where my problem is
console.log(err); // This will log the mongodb error here, about duplicate emails
res.status(500).send(err); // I'm trying to send the mongodb error message back to the client to display it on the screen (I will handle making the message friendly to read, once I can get this to work)
});
});
So my catch is getting the mongo error, and then I try to respond with it, by sending it to the client.
Here is my client side code:
axios({
method: 'post',
url: '/auth/users',
headers: {
'Content-Type': 'application/json'
},
data: {
email,
password
}
}).then((res) => {
console.log('this is the response', res);
if (res.status === 200) {
var authToken = res.headers.authorization.split(' ')[1];
authenticateUser(authToken);
this.props.history.replace('/dashboard');
} // This all works fine for a signup with no errors
}).catch((err) => {
console.log('Signup error:', err);
// I am expecting the above line of code to log the long Mongodb
// error message that I am sending back in my res.status(500).send(err)
// catch call from the server, but instead all I am getting is
// "Signup error: Error: Request failed with status code 500"
});
Either I'm not sending the error correctly, or I'm not handling it correctly when it comes back, but I have no idea which it is or why.
I can't even send back res.status(500).send('some string here') and access that string.
Thanks
Update
So I just checked in postman, by sending a POST that could cause the error, and I am getting the correct response sent through.
My server catch actually looks like this:
.catch((err) => {
res.status(500).send({message: err.message});
});
And the postman response body looks like this:
{
"message": "E11000 duplicate key error collection: authBoilerplate.users index: email_1 dup key: { : \"email#example.com\" }"
}
So I'm just not handling it correctly in my client side code, still at a loss though.
Thanks everyone, I was able to find the answer to my question, so I'm posting it here in the hope that it might help someone else.
I was definitely sending my custom error message back, I just wasn't handling it properly on the client side.
When I was using a catch call on the client and logging the error, I was expecting to see everything included in the error. It turns out that the error comes back with a response property error.response, and that is where all the messaging is.
So changing my catch call to this:
axios(//... send post in here)
.then(// ... same as in my question)
.catch((err) => {
console.log('error', err);
console.log('error response', err.response); // this is where the actual error response message is error.response.message
});
resulted in logging the stack trace and the error response:
error Error: Request failed with status code 500
at createError (eval at <anonymous> (bundle.js:541), <anonymous>:16:15)
at settle (eval at <anonymous> (bundle.js:847), <anonymous>:18:12)
at XMLHttpRequest.handleLoad (eval at <anonymous> (bundle.js:520), <anonymous>:77:7)
error response Object {data: Object, status: 500, statusText: "Internal Server Error", headers: Object, config: Object…}
I was still expecting to be able to see that I had access to that 'response' property by logging just the error, so if anyone has any insight into that, it would be great to include in the comments.
Another way of solving this is by converting the error to string.
.catch((err) => {
res.status(500).send(err.toString());
});
Getting that error in console when trying to get data from a API. Anybody have this issue before?
var url = "https://api.website.com/get/?type=events&lat=" + localStorage.getItem('latitude')
+ "&lng=" + localStorage.getItem('longitude') + "&distance=50";
$http({
headers: {
'Content-type': 'application/json'
}
})
$http.get(url).success(function (events) {
$scope.events = events;
});
error:
TypeError: Cannot read property 'protocol' of undefined
at Gb (http://localhost:38772/www/js/plugins/angular.min.js:114:238)
at s (http://localhost:38772/www/js/plugins/angular.min.js:65:249)
at new EventsController (http://localhost:38772/www/js/angular.js:4:5)
at d (http://localhost:38772/www/js/plugins/angular.min.js:30:452)
at Object.instantiate (http://localhost:38772/www/js/plugins/angular.min.js:31:80)
at http://localhost:38772/www/js/plugins/angular.min.js:61:486
at http://localhost:38772/www/js/plugins/angular.min.js:49:14
at q (http://localhost:38772/www/js/plugins/angular.min.js:7:380)
at E (http://localhost:38772/www/js/plugins/angular.min.js:48:382)
at f (http://localhost:38772/www/js/plugins/angular.min.js:42:399)
You're issuing a malformed $http request.
You are not supposed to set your headers in a separate call to $http. Call to $http() will actually issue the request, but since you configured it with just the header (no url or method), it throws that error at you (as expected).
If you want to set your header you'll want to do that by passing a custom config object as a second parameter to your $http.get() call:
$http.get(url, {
headers: {
'Content-type': 'application/json'
}
}).success(function (events) {
$scope.events = events;
});
This error occurs when something goes wrong in request, for ex. if you set url as undefined, invalid method, or invalid content type, anything wrong with request object will throw this error.
Got the same Issue calling an API from react.
After checking my code I saw the endpoint from the environment file could not be found which led to the error.
All I did to fix it was to stop and restart the react app
In vue 2 project if you're using axios and facing this error then try this solution.
Install vue-axios from https://www.npmjs.com/package/vue-axios
Use vue-axios in this way to remove protocol error
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios' //this line is important to remove 'protocol' ERROR
Vue.use(VueAxios, axios)