Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

[jithju31]

I'm following this link for setting up nodejs with react

I've succeeded in setting up my nodejs Express for my reactjs project. But when i try to print the data on the front end, am getting this Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0. Where my express backend should send a json response but instead its sending an html response in Network tab.

So my Front code doesn't recognize it and print it in front end. Please help me to resolve this issue.

My expressjs code

 var express = require("express");

 var app = express();

 var cors  = require('cors');

 app.use(cors());

 //my code for https

 var https = require('https')
 var fs = require('fs');
 var key = fs.readFileSync('example.key');
 var cert = fs.readFileSync('example.crt');
 var server = https.createServer({ key: key, cert: cert }, app);
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 server.listen(3001, () => { console.log('App listening on port 3001! Go to 
 https://172.10.10.130:3001/prod') });


app.get("/prod", (req, res) => {
res.redirect("https://172.10.10.130")
res.json({ message: "Hello from Express!" });
});

My react frontend code

 import React, {Component} from 'react';

 class Product extends Component {

 state = {
   data: ''
  };

 componentDidMount() {
  this.callBackendAPI()
    .then(res => this.setState({ data: res.message }))
    .catch(err => console.log(err));
  }
   // fetching the GET route from the Express server which matches the 
  GET route from server.js
   callBackendAPI = async () => {
   const response = await fetch('/prod', {
     method: 'GET',
     mode: 'cors',
     headers: {
       'Content-Type': 'application/json',
     },
    
   })
      .then(res => res.json())
    
     const body = await response.json();
   

  if (response.status !== 200) {
   throw Error(body.message) 
  }
 return body;
};


 render() {
   return (
    <>

      <div className="App">
    <header className="App-header">
     <img src={logo} className="App-logo" alt="logo" />
     <p>Welcome ! {this.state.data}</p>
   </header>
   </div>

    </>                     
      );
    }
    }
  export default Product; 

When i hit https://172.10.10.130:3001/prod, as per my node js code it's redirecting me to https://172.10.10.130 where my react front end runs. But its not fetching the value and printing it in my front end. Instead am getting SyntaxError: Unexpected token < in JSON at position 0 in console. This is because the response its fetching seems to be in html but i need it in json format.

PS: this code works fine, when i use both the front end and backend both in http with localhost but am getting html response in while hitting in https May i know what needs to be done from my end.

I would like to make it work in https

When i hit https://172.10.10.130:3001/prod it redirects me to https://172.10.10.130 but without fetching data.

Please help me to resolve this issue. Thanks in advance