title: ReactJS and Node.JS [JSON.parse: unexpected character at line 1 column 1 of the JSON data]
body: <p>I'm getting struggle with this code, so I need a third eye on this to find a solution.</p>
  
  <p>I'm developing a ReactJS app with a REST API with Node.JS (Express), and I'm getting this error:</p>
  
  <blockquote>
    <p>SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"</p>
  </blockquote>
  
  <p>I'm using <a href="https://sequelize.org/" rel="nofollow noreferrer">Sequelize ORM</a> to work with Models and Database in Node.JS.
  I'm also using CORS module for Node.JS.</p>
  
  <p>This implementation works fine.</p>
  
  <pre><code>// Node.js Route for login
  const router = require('express').Router();
  const User = require('user');
  router.post("/login", async (req, res) =&gt; {
      try {
          await User.findOne({
              where: {
                  email: req.body.email,
                  password: req.body.password,
              }
          }).then((user) =&gt; {
              if (!user) {
                  return res.send({message: "Login error!"});
              } else {
                  const userData = {id: user.id, email: user.email};
                  res.send({"user": userData});
              }
          }).catch((err) =&gt; {
              return res.send(err);
          });
      } catch (err) {
          return res.send(err);
      }
  });
  </code></pre>
  
  <pre><code>// ReactJS for login
  loginFunction(e, data) {
      e.preventDefault();
      fetch('http://localhost:4500/login', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
      })
          .then(response =&gt; response.json())
          .then(json =&gt; {
              this.setState({'user': json['user']});
          })
          .catch((err) =&gt; {
              console.log(err);
              this.setState({errors: "Login error"})
          });
  }
  </code></pre>
  
  <p>On the other hand, this implementation do not work properly and throws the <code>SyntaxError</code> above:</p>
  
  <pre><code>// Node.JS for Posts
  const router = require('express').Router();
  const Post = require('post');
  router.get("/posts", async (req, res) =&gt; {
      try {
          await Post.findAndCountAll()
              .then((posts) =&gt; {
                  res.send({"posts": posts});
              }).catch((err) =&gt; {
                  return res.send(err);
              });
      } catch (err) {
          return res.send(err);
      }
  });
  </code></pre>
  
  <pre><code>// ReactJS for Posts
  postsFunction() {
          fetch('http://localhost:4500/posts', {
              method: 'GET',
              headers: {
                  'Content-Type': 'application/json'
              }
          })
              .then(response =&gt; response.json())
              .then(json =&gt; {
                  this.setState({'posts': json.posts.rows});
              })
              .catch((err) =&gt; {
                  console.log(err);
                  this.setState({errors: "Posts error."})
              });
      }
  </code></pre>
  
  <p>As you can see both implementation have little differences, What am I missing?</p>
  
  <p>PS: When I test the 2nd implementation on Postman, data is retrieving successfully.</p>