Develop Reference

Fetch cURL request using React

I have a GET curl request
curl -X GET "http://localhost:8000/get/folder" -H "accept: application/json" -H "path: /"

Something like this should work.
fetch('http://localhost:8090/get/directory', {
headers: {
'Accept': 'application/json',
'Path': '/',
}
})
.then(response => response.json())
.then(json => console.log(json));
You can call this from in a useEffect() in your React app, for example. Or componentDidMount if it is a class component.

Axios library failing to respond for post request, trying with curl and postman works

Below is the following code I am using to access a remote server:
axios({
method: 'post',
url: 'SERVER URI',
data: {"key1": "val1","key2": "val2"},
headers: {
'Authorization': 'Bearer ${token}',
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((res) => {
console.log('Response **', res);
resolve(res.data);
}).catch(err => {
console.log('Error from server is ***', err.response);
reject(err.response.data);
});
here token is an oauth2 bearer token using client credentials as grant-type. I am getting a 404 response for this with data: {message: ''}. But I tried the same in postman as well as with a curl request. For both these instances, I got back a valid 200 response.
I am attaching the curl request also,
curl --location --request POST 'URI' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{"key1": "val1","key2": "val2"}'
I may be overlooking something but I am going crazy as to not understanding what I am missing. Any help for this is appreciated

You can try to use formData like that:
const data = new FormData()
data.append('key1', 'val1')
data.append('key2', 'val2')
axios({
method: 'post',
url: 'SERVER URI',
data: data,
headers: {
'Authorization': 'Bearer ${token}',
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((res) => {
console.log('Response **', res);
resolve(res.data);
}).catch(err => {
console.log('Error from server is ***', err.response);
reject(err.response.data);
});

A 404 response makes me think that maybe the url has a typo in it, but I have seen APIs that respond with 404 as a security measure when authorization fails so it could be a bad Authorization header, too.
There's a typo in the code sample from the original question:
headers: {
'Authorization': 'Bearer ${token}',
...
}
the single quotes surrounding the Bearer ${token} would need to be changed to backticks in order for the template string to actually be expanded.
As it is now, the Authorization header is actually being sent with the literal string ${token} as your token.

Error 400 Authentication issue Curl to Axios

I am trying to adapt this curl request to run in Axios but I keep getting an error "Header Validation Failure". What is wrong with my authentication?
Original Curl:
curl -X POST www.website.com
-H "Content-Type: application/json"
-u 'XXX:YYY'
-d $'{
datastring
}'
Axios:
axios({
method: 'post',
url: 'www.website.com',
data: dataString,
headers: {
'Content-Type': 'application/json',
'Authorization': \`Basic 'XXX:YYY'`
}
}).then((response) => {
alert(response);
});

How to make an encoded POST request using axios?

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);

Axios not working for accessing getpocket api

I can make the oauth request using curl but using axios I get a error about missing consumer key
X-Error
Missing consumer key.
This happens in the OPTIONS phase of making the request.
axios({
method: 'post',
url: 'https://getpocket.com/v3/oauth/request',
data: {
'consumer_key': 'xxxx-xxxxxxxxxxxxxxx',
'redirect_uri': 'http://localhost:8080/'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
Here is the curl request
curl https://getpocket.com/v3/oauth/request --insecure -X POST -H "Content-Type: application/json" -H "X-Accept: application/json" -d "{\"consumer_key\":\"xxxx-xxxxxx\",\"redirect_uri\":\"http://localhost:8080/\"}"

Try adding the headers to your request for it to accept json:
axios({
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
url: 'https://getpocket.com/v3/oauth/request',
data: {
'consumer_key': 'xxxx-xxxxxxxxxxxxxxx',
'redirect_uri': 'http://localhost:8080/'
}
});