We Keep Coding

'unsupported_grant_type' when trying to get an access token from Discord API

So I am trying to implement Discord login to my website, but when trying to exchange the code for an access token from https://discord.com/api/oauth2/token I just get { error: 'unsupported_grant_type' }.
My code:
const tokenResponseData = await request('https://discord.com/api/oauth2/token', {
method: 'POST',
data: JSON.stringify({
client_id: config.clientId,
client_secret: config.clientSecret,
code: code,
grant_type: 'authorization_code',
redirect_uri: `http://localhost:3000/api/auth`,
scope: 'identify',
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
});
Been struggling with this for a while now, so any help would be great!

According to this issue on the Discord GitHub, this can happen when your body is incorrectly formatted.
After some digging, I saw this post on SO which has led me to believe that you should use URLSearchParams rather than stringifying your json data.
let params = new URLSearchParams();
params.append('client_id', config.clientId);
params.append('client_secret', config.clientSecret);
params.append('code', code);
params.append('grant_type', 'authorization_code');
params.append('redirect_uri', `http://localhost:3000/api/auth`);
params.append('scope', 'identify');
const tokenResponseData = await request(
'https://discord.com/api/oauth2/token',
{
method: 'POST',
data: params,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
);

Turns out I was doing it all wrong. I needed to have the request parameters formatted like URL queries and sent as a string in the body of the POST request.
const tokenResponseData = await fetch(
`https://discord.com/api/oauth2/token`,
{
method: 'POST',
body: `client_id=${encodeURIComponent(`${config.clientId}`)}&client_secret=${encodeURIComponent(`${config.clientSecret}`)}&grant_type=authorization_code&code=${code}&redirect_uri=${encodeURIComponent(`http://localhost:3000/api/auth`)}`,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
);

Javascript is returning html instead json

I am trying to connect to bitbucket and gather the commits. I tried the below code.
import fetch from 'node-fetch';
async function neww(){
await fetch('https://bitbucketexample.com/projects/CD/repos/central-msp-config/commits', {
method: 'GET',
headers: {
'Accept': 'application/xml',
'Authorization': 'Bearer YXIxMjAwOldlbGNvbWUxMDkqCg=='
}
}).then((data)=>{
console.log(data.status)
return data.body();
}).then(text => console.log(text))
}
neww()
I am expecting it to return json with commit details while I am receiving the html of the page.
Would appreciate your help in fixing this., Thank you in advance.

You're expecting json but your request header has 'Accept': 'application/xml'
Try changing it to 'Accept': 'application/json'
That should fix it.

can't send multipart with fetch but axios works fine

Here is my code:
function uploadImage(payload) {
return fetch('/api/storage/upload/image/', {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
Accept: 'application/json',
Authorization: 'Bearer <token>',
},
body: payload,
});
}
function uploadImage2(payload) {
return axios.post('/api/storage/upload/image/', payload, {
headers: {
'Content-Type': 'multipart/form-data',
Accept: 'application/json',
Authorization: 'Bearer <token>',
},
});
}
function test(file, meta_data) {
var formBody = new FormData();
formBody.set('image', file);
formBody.set('meta_data', meta_data);
uploadImage(formBody);
// doesn't work
uploadImage2(formBody);
// works
}
Can someone please explain to me how I'm supposed to send multipart requests with fetch?
The error I get with this code is: 400 bad request, file and meta_data are null.

Do not use this header: 'Content-Type': 'multipart/form-data'.
Remove the header and it should work.
Explanation:
When using fetch with the 'Content-Type': 'multipart/form-data' you also have to set the boundary (the separator between the fields that are being sent in the request).
Without the boundary, the server receiving the request won't know where a field starts and where it ends.
You could set the boundary yourself, but it's better to let the browser do that automatically by removing the 'Content-Type' header altogether.
Here's some more insight: Uploading files using 'fetch' and 'FormData'

Here is what worked for me:
function uploadImage(payload) {
return fetch('/api/storage/upload/image/', {
method: 'POST',
headers: {
Authorization: 'Bearer <token>',
},
body: payload,
});
}
By comparing the cURL requests sent by the browser I discovered that in the axios request has this:
"Content-Type": "multipart/form-data; boundary=---------------------------19679527153991285751414616421",
So I figured that when you manually specify the content type, fetch respects that and doesn't touch anything while still does it's thing the way it wants:-/ so you just shouldn't specify it, fetch will know itself since you are using formData()

Requested property name of a value that is not an object - while fetching data from server

I am new to the react-native world. I am using the following code to get a response from server. While debugging it is working fine, but without debugging it gives below error
fetch("http://hcdsny.trantorinc.com/index.php/api/register", {
method: "POST",
headers: 'application/x-www-form-urlencoded',
body: JSON.stringify(data)
})
.then(function(response){
return response.json();
})
.then(function(data){
}).catch((error) => {
console.error(error);
});
Thanks in Advance!

I have faced the same issue and solved it by replacing headers with an object instead of a string.
Try this.
Replace (Header as a String)
headers: 'application/x-www-form-urlencoded'
with (Header as a Object)
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
It may work for you.

Headers should be an object, not a string. The key for the header you are looking for is content-type:
headers: {
'content-type': 'application/x-www-form-urlencoded'
}

Uploading file via PUT method in react-native

I am trying to upload file(image) from my react-native app to backend server. The RESTFUL backend server accepts file send via PUT method on a specific url. I am stuck on react-native trying to find the proper way to send file via PUT method.
I am trying to replicate behavior of
curl -X PUT -T "/path/to/file" "http://myputserver.com/puturl.tmp"
I found XMLHttpRequest method of doing this on a browser but won't work on react-native. Have anyone gone through this please help!!!

fetch('https://mywebsite.com/endpoint/', {
method: 'PUT',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
}),
})
.then((response) => response.json())
.then((responseJson) => {
alert(responseJson)
})
.catch((error) => {
console.error(error)
})
reference
reference 2

Fetch
Use the fetch api, which is supported by React Native.
Below is an example of the official documentation.
Fetch supports PUT, according to the specs.
fetch('https://mywebsite.com/endpoint/', {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})

You can use the PUT like the answer above. You might be missing the 'Content-Type': 'multipart/form-data;'.
const config = {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data;',
'Authorization': 'Bearer ' + 'SECRET_OAUTH2_TOKEN_IF_AUTH',
},
body: data,
}
Some more information in this blog post:
http://snowball.digital/Blog/Uploading-Images-in-React-Native