SyntaxError：JSON中位置0处的意外令牌＃

Question

I have a form that send a search term to node. In the request header I do set the content type to json, but I still get this error. I have no idea what I'm doing wrong. new to node js. I am using angular 4 as the front end:

This is my component code for the search form:

  onSearch(){
console.log('the sent term is: ', this.searchForm.value.term)
this._auth.searchTweets(this.searchForm.value.term)
  .subscribe(
    (res) => {
      console.log(res)
    }
  )
 }

This is my service code which sends the term to the node backend:

  searchTweets(term){
console.log('from auth search: ', term)
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:4000/users/profile',term, {headers:headers})
  .map(res => res.json());
 }

and my code for the node side is:

router.post('/profile',(req,res,next) => {
console.log('the backend term: ',req.body.term)
})

In the network tab of dev tools i get html and not json? what am i missing here?

what i try to log the res in the node side :

SyntaxError: Unexpected token # in JSON at position 0
    at Object.parse (native)
    at createStrictSyntaxError (C:\xampp\htdocs\angssrtest\node_modules\body-parser\lib\types\json.js:157:10)
    at parse (C:\xampp\htdocs\angssrtest\node_modules\body-parser\lib\types\json.js:83:15)
    at C:\xampp\htdocs\angssrtest\node_modules\body-parser\lib\read.js:121:18
    at invokeCallback (C:\xampp\htdocs\angssrtest\node_modules\raw-body\index.js:224:16)
    at done (C:\xampp\htdocs\angssrtest\node_modules\raw-body\index.js:213:7)
    at IncomingMessage.onEnd (C:\xampp\htdocs\angssrtest\node_modules\raw-body\index.js:273:7)
    at ZoneDelegate.invokeTask (C:\xampp\htdocs\angssrtest\node_modules\zone.js\dist\zone-node.js:425:31)
    at Zone.runTask (C:\xampp\htdocs\angssrtest\node_modules\zone.js\dist\zone-node.js:192:47)
    at ZoneTask.invokeTask (C:\xampp\htdocs\angssrtest\node_modules\zone.js\dist\zone-node.js:499:34)
    at IncomingMessage.ZoneTask.invoke (C:\xampp\htdocs\angssrtest\node_modules\zone.js\dist\zone-node.js:488:48)
    at emitNone (events.js:86:13)
    at IncomingMessage.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:974:12)
    at ZoneDelegate.invokeTask (C:\xampp\htdocs\angssrtest\node_modules\zone.js\dist\zone-node.js:425:31)
    at Zone.runTask (C:\xampp\htdocs\angssrtest\node_modules\zone.js\dist\zone-node.js:192:47)

and by the way i have a get on this same route that works. so i don't get why in the post one i have this issue

Answer 1

The error is because you are receiving the html file, res.json() is not able to parse the HTML file. Make sure the appropriate route exists in node and you are sending the proper response.

I notice the endpoint you are hitting is http://localhost:4000/users/profile and the one you are listening is '/profile'. users is missing in route. And i assume you have a /* listener which returns a html file and thats what you get as a response.

searchTweets(term) {
  console.log('from auth search: ', term)
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  return this.http.post('http://localhost:4000/users/profile',term, 
  {headers:headers})
    .map(res => res.json());
 }

And the route listener doesnt send any response in return.

router.post('/profile',(req,res,next) => {
 console.log('the backend term: ',req.body.term)
})