issue with reading result from POST in fetch request to Github API

Question

I am using the fetch api to get an access token returned from the github api.

When I check the network tab I see that the token is returned but I am unable to access it in my fetch request.

My code looks like this:

fetch(`https://github.com/login/oauth/access_token?client_id=***&client_secret=***&code=${code}&redirect_uri=http://localhost:3000/&state=react`, {
    method: 'POST',
    mode: 'no-cors',
    headers: new Headers({
      'Content-Type': 'application/json'
    })
  }).then(function(res) {
    console.log(res); // I have already tried return res.json() here
  })

The console displays the following error if I return res.json():

index.js:30 Uncaught (in promise) SyntaxError: Unexpected end of input

The GitHub docs states the response takes the following format:

By default, the response takes the following form:

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer

I guess it isn't returning valid json but just a string so I am not sure how to access this response.

The response looks like this:

However, when I try and log out the response I get SyntaxError: Unexpected end of input

Just going to leave this here to save you a lot of time : developer.chrome.com/devtools — Pogrindis
– Pogrindis, Commented Apr 16, 2018 at 11:03
I have been using the console. If you read the question I have shown the error in the console — peter flanagan
– peter flanagan, Commented Apr 16, 2018 at 11:04
Also you have 2x then, but I only see 1 promise.. Yes you are seeing error in console, but you are not debugging.. Breakpoint ? — Pogrindis
– Pogrindis, Commented Apr 16, 2018 at 11:04
@31piy I don't think it is valid son but I am not sure how to get the response - updated question with ref to GitHub docs — peter flanagan
– peter flanagan, Commented Apr 16, 2018 at 11:05

Kishan Mundha · Accepted Answer · 2018-04-16 12:24:37Z

1

If you are using mode: 'no-cors, browser will restrict to access body. Browser has security for cross domain. If you want to access body you have to call without mode: 'no-cors property.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

This will work

fetch(`https://jsonplaceholder.typicode.com/posts/1`, {
  method: 'GET',
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
.then(res => res.json())
.then(function(res) {
  console.log(res);
})

This will not work

fetch(`https://jsonplaceholder.typicode.com/posts/1`, {
  method: 'GET',
  mode: 'no-cors',
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
.then(res => res.json())
.then(function(res) {
  console.log(res);
})

edited Apr 16, 2018 at 12:24

answered Apr 16, 2018 at 11:18

Kishan Mundha

3,15120 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

peter flanagan Over a year ago

I need to use mode: no-cors to allow the request

Kishan Mundha Over a year ago

Is there any specific reason to use no-cors. If github restricting you by cross domain, you have to remove no-cors and create your own backend api which get data from github.

peter flanagan Over a year ago

I am getting the response returned, but I am unable to access it in the fetch request

Kishan Mundha Over a year ago

Yes, browser will take response but will not give acces to JavaScript as security policy.

31piy · Accepted Answer · 2018-04-16 11:26:58Z

0

I think you're almost there. You've mentioned this link to the docs. If you read further, you can see that to get response in JSON, you need to include a header named Accept with the value of application/json.

fetch(` ... `, {
    method: 'POST',
    mode: 'no-cors',
    headers: new Headers({
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    })
  }).then(function(res) {
    ...
  })

This way, you can apply .json() on res.

answered Apr 16, 2018 at 11:26

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Collectives™ on Stack Overflow

issue with reading result from POST in fetch request to Github API

2 Answers 2

This will work

This will not work

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

This will work

This will not work

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related