0

I have what seems to be a valid JSON object according to jsonlint: 

{"data":[{"name":"undefined - blablabla (undefined)"},{"name":"undefined - blablabla (undefined)"},{"name":"undefined - blablabla (undefined)"},{"name":"undefined - On blablabla (undefined)"}]}

however, I have the following error:

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

Here is my react component:

  componentDidMount() {
    fetch('/',    {
          method: 'GET',
          withCredentials: true,
          headers: {
    'Content-Type': 'application/json', 
    'Access-Control-Allow-Origin': '*',
    'Accept': 'application/json' },
     credentials: 'same-origin'      })
      .then(res => res.json())
      .then(user => this.setState({ data: data }));
  }

Here is how I'm sending the response from the server-side:

app.get(
    "/auth/google/callback",
    passport.authenticate("google", { failureRedirect: "/error", session: false }),
    function(req, res) {
        var token = req.user.token;
    request('https://www.googleapis.com/analytics/v3/management/accounts?access_token=' + token,  
function (error, response, body) {
    let views = []
   JSON.parse(body).items.forEach(view => {
            views.push({
              name: view.webPropertyId + ' - ' + view.name + ' (' + view.websiteUrl + ')'
            })
          })
  console.log(JSON.parse(body).items);
  res.json({data:views});

});
    }
);

EDIT#1: I've updated the headers with 'Accept': 'application/json'

Simon Breton
  • 2,638
  • 7
  • 50
  • 105
  • 4
    Sounds like your `fetch` request is returning HTML. If you look at your **Network** tab and look at the **Response**, do you that you _actually_ are getting JSON back? – romellem Oct 07 '19 at 21:07
  • you are right. I got this: `Content-Type: text/html; charset=UTF-8` how do I return JSON? – Simon Breton Oct 07 '19 at 21:15
  • You are fetching `/` I assume you started the project with `yarn start` so you should put your file in `public` and name it `hi.json` now you can fetch it with `fetch("hi.json")` – HMR Oct 07 '19 at 21:27
  • @HMR I've updated my question with server-side code – Simon Breton Oct 07 '19 at 21:33
  • 1
    Err, most of the headers you're sending with that fetch are... well, wrong/unnecessary. – Kevin B Oct 07 '19 at 21:35
  • Are you running the project with webpack dev server? If so then I guess you open `localhost:3000/` you have to use another port to get to your express server – HMR Oct 07 '19 at 21:38
  • I have everything under one port only. – Simon Breton Oct 07 '19 at 21:38
  • 1
    contentType isn't needed for GET Requests, as there's no body for the contentType to apply to. access-control headers don't need to be set client-side. and accept won't alter how node.js responds. – Kevin B Oct 07 '19 at 21:38
  • @KevinB you are right. I'd like to delete my question but I can't. Now I have a CORS policy issue which is a totally different issue. – Simon Breton Oct 07 '19 at 21:42
  • Deleting your question is not required, it is a valid question that has been answered elsewhere :). I have marked it as a duplicate of that other answers, so that others with the same problem as you would be able to find the answer more easily. (If you think I have missed my mark on the duplicate, feel free to reply here or flag this question). – Madara's Ghost Oct 08 '19 at 08:40

0 Answers0