How to make an encoded POST request using axios? - javascript

I am trying to create a POST request in my reactjs app based on the following API request example:
Example API request
curl -X "POST" -H "Authorization: Basic ZjM4ZjAw...WY0MzE=" -d grant_type=client_credentials https://accounts.spotify.com/api/token
I'm supposed to be base64 encoding the text following "Basic" within the header.
How do I create this request in javascript using axios? This is what I have so far:
async componentDidMount() {
const encodedString = new Buffer('1ff56abe7792f426ea41a771d707d6690:1b2cca2dedd3949b0a6c5e1582446c9c5').toString('base64');
const [initSpotResponse] = await Promise.all([
axios.post('https://accounts.spotify.com/api/token', { headers: { 'Authorization': `Basic ${encodedString}` } })
]);
}
How do I include the "grant_type=client_credentials" part?

According to axios’ README, this is the Request method aliases for POST requests
axios.post(url[, data[, config]])
axios.post('https://accounts.spotify.com/api/token',
{ data: { grant_type: ‘client_credentials’} },
{ headers: { 'Authorization': `Basic ${encodedString}` } }
)
You could also do
const options = {
url: ‘https://accounts.spotify.com/api/token',
method: 'POST',
headers: { 'Authorization': `Basic ${encodedString}` },
data: { grant_type: ‘client_credentials’}
};
axios(options);

Related

Trying to use fetch instead of axios to make a POST request, but the response from the fetch request returns an error, whereas axios doesn't

I have a function which uses Axios to send a POST request which goes through successfully and I get the right response. Now I want to try using fetch to do the exact same POST request. Unfortunately, the fetch request returns a 415 Unsupported Media Type response error and I have no idea why.
Currently:
onBeforeUnload = () => {
try {
const defaultPresence = {
presence: 'AVAILABLE',
message: '',
};
const url = getServerURL() + urls.PRESENCE;
axios.post(
url,
defaultPresence,
{
headers: {
Authorization: `Bearer ${getAccessToken()}`,
},
},
);
} catch (error) {
console.log(error);
}
}
The fetch code I've used to replace the Axios POST request.
fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${getAccessToken()}`,
},
body: defaultPresence,
});
fetch does not recognise plain objects as the body.
If you want to send JSON then you need to encode the data and set the content-type header yourself.
fetch(url, {
method: 'POST',
headers: {
Authorization: `Bearer ${getAccessToken()}`,
"Content-Type": "application/json",
},
body: JSON.stringify(defaultPresence),
});

Transpile python request in Javascript fetch?

I was wondering how to write this python request in javascript:
url = "something.something"
data = {"name":"description"}
auth = ("user","11111")
x = requests.post(url, json=data, auth=auth)
I have this so far:
fetch(`something.something`, {
method: 'POST',
header: {
'Content-Type': 'application/json',
'Authorization': 'user:11111',
},
body: {
"name": "description"
}
})
But I have an 403. My guess is that the authorization is formatted incorrectly.
auth = ("user","11111")
x = requests.post(url, json=data, auth=auth)
This uses HTTPBasicAuth for authorization.
Basic HTTP Auth requires the credentials to be passed in the Authorization header like this:
Authorization: Basic <base64(user:password)>
So the javascript example should look something like:
fetch(`something.something`, {
method: 'POST',
header: {
'Content-Type': 'application/json',
'Authorization': 'Basic ' + btoa('user:11111'),
},
body: {
"name": "description"
}
})

Replicate curl with fetch function in js

I have an application that returns a buffer with a Http request. When I run curl in my terminal I get a proper response:
Curl:
curl -s -X GET \ "url" \ -H "authorization: Bearer token" \ -H "content-type: application/json"
Response:
Pendiente now has [{"Key":"73ef53d2848708ae3288db3afb69ee85a663eba2ab147e83494f65585d171a2d","Record":{"cantidad":"100","docType":"fabricacion","estado":"Pendiente","id":"73ef53d2848708ae3288db3afb69ee85a663eba2ab147e83494f65585d171a2d","mercado":"dercadona","owner":"jose","producto":"manzanas","usuario":"jose"}},{"Key":"9b2d52becf9620971c7fd31c54b817533157cb2c7186dd3835f4c502742418b5","Record":{"cantidad":"200","docType":"fabricacion","estado":"Pendiente","id":"9b2d52becf9620971c7fd31c54b817533157cb2c7186dd3835f4c502742418b5","mercado":"mercadona","owner":"jose","producto":"peras","usuario":"jose"}}] after the move
I am trying to get the json part from that response with fetch using js (the fetch goes inside another fetch). I've tried different methods but I can't manage to get it properly
return fetch(url_get_tx,{
method: 'get',
headers: {
'Content-type': 'multipart/form-data',
'authorization': 'Bearer '+data.token
}
}
.then(function(data) {
var reader = data.body.getReader();
return reader.read()
console.log("here");
console.log(typeof(reader));
console.log(reader);
})
Many thanks
return fetch(url_get_tx,{
method: 'get',
headers: {
'Content-type': 'application/json'
'authorization': 'Bearer '+data.token
}
})
.then(function(data) {
return data.json()
}).then(result => console.log(result))

Axios Post Method to implement customized headers and with token value

I'm trying to write a Post method with Axios in NodeJS.
I have following things to pass as param in post method
url = http:/xyz/oauthToken
header 'authorization: Basic kdbvkjhdkhdskhjkjkv='\
header 'cache-control:no-cache'
header 'content-type: application/x-www-form-urlencoded'
data 'grant_type=password&username=user123&password=password123'
As I tried with following code but new to Axioz not sure how can exactly implement the header with grant type of body response.
var config = {
headers: {'Authorization': "bearer " + token}
};
var bodyParameters = {
data 'grant_type=password&username=user123&password=password123'
}
Axios.post(
'http:/xyz/oauthToken',
bodyParameters,
config
).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
});
Any help/suggestion would be appreciated :-)
Currently, axios does not make it convenient to use form-encoded data; it's mostly optimized toward JSON. It's possible, though, as documented here.
const querystring = require('querystring');
const body = querystring.stringify({
grant_type: 'password',
username: 'user123',
password: 'password123'
});
axios.post('http:/xyz/oauthToken', body, {
headers: {
authorization: `bearer ${token}`,
'content-type': 'application/x-www-form-urlencoded'
}
});

ReactJS- Pass the JWT token as Authorization in axios method for http request

I have an application where we are generating a JWT token and passing that token in Header in the next api call.As a response of that, I should get a key.I am able to see the response through postman.I am using ReactJS in Front End and trying to achieve the same by passing the JWT token in Header while doing the api call but facing some issues.
My code-
getKey() {
let postData = {
vin: "5678",
id: "abc12",
};
axios({
method: "post",
url: "http://localhost:8080/generateKey",
headers: {
"Content-Type": "application/json"
},
data: postData
})
.then(function(response) {
setKey(response.data.key);
})
.catch(function(error) {
console.log(error);
getKeyError();
});
}
memberAuth() {
var self = this;
axios({
method: "GET",
url: "http://localhost:8080/authenticateMember",
headers: {
"Content-Type": "application/json",
"Authorization": localStorage.setItem()
},
data: {
"id":"xyzzy",
"password":"abc"
}
})
.then(function(response) {
//to do
}
I am trying to save the generated token (valid for 30mins) in a localStorage/SessionStorage but not sure if this is the right way. Can someone tell me where am I going wrong.
Create instance of your axios,
const agent = axios.create({
baseURL: config.api_url,
transformRequest: [transformRequest],
transformResponse: [transformResponse],
headers: { 'Content-Type': 'application/vnd.api+json' },
});
And then call this function to set headers dynamically
agent.defaults.headers.common['Authorization'] = `JWT ${localStorage.getItem('token')}`;
Then call methods of your axios instance to make API calls
agent.get(`${endpoint}search`, { params }),
agent.post(`${endpoint}search`, JSON.stringify(body)),

Categories

Resources