I`m trying to get the token from the spotify API, I use axios. I use the example given by the API as a guide, but give me the error 404
export const getToken = code => async dispatch => {
const responseToken = await axios.post({
url: "https://accounts.spotify.com/api/token",
form: {
grant_type: "authorization_code",
code,
redirect_uri
},
headers: {
'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
},
json: true
})
console.log(responseToken);
The first line is because I`m using redux,I just wanted you to see that it was a asinc method.
I have being all day trying to fix this, I don`t have more ideas of how to solve this
Try changing
form: {
grant_type: "authorization_code",
code,
redirect_uri
}
to
data: JSON.stringify({
grant_type: "authorization_code",
code,
redirect_uri
})
You want to send it in the request body, hence "data", that's how you define it in axios.
Also, I don't think you need json: true
EDIT:
Pretty sure you have to add 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' to the headers as well.
Related
I'm trying to fetch an image resource that's part of a conversation message.
I've tried both FETCH as well as using AXIOS but I'm getting the same error message.
Here's an example of my FETCH request
const token = `${accountSid}:${authToken}`;
const encodedToken = Buffer.from(token).toString('base64');
let response = await fetch('https://mcs.us1.twilio.com/v1/Services/<SERVICE_SID>/Media/<MEDIA_SID>',
{
method:'GET',
headers: {
'Authorization': `Basic ${encodedToken}`,
}
});
let data = await response.json();
console.log(data);
And here's what Axios looked like
let config = {
method: 'get',
crossdomain: true,
url: 'https://mcs.us1.twilio.com/v1/Services/<SERVICE_SID>/Media/<MEDIA_SID>',
headers: {
'Authorization': `Basic ${encodedToken}`,
},
};
try {
const media = await axios(config);
console.dir(media);
} catch(err) {
console.error(err);
}
Both ways are NOT working.
After looking into it more, I found out that Chrome makes a pre-flight request and as part of that requests the allowed headers from the server.
The response that came back was this
as you can see, in the "Response Headers" I don't see the Access-Control-Allow-Headers which should have been set to Authorization
What am I missing here?
I have made sure that my id/password as well as the URL i'm using are fine. In fact, I've ran this request through POSTMAN on my local machine and that returned the results just fine. The issue is ONLY happening when I do it in my code and run it in the browser.
I figured it out.
I don't have to make an http call to get the URL. It can be retrieved by simply
media.getContentTemporaryUrl();
I am currently working on a simple GitHub GraphQL client in NodeJS.
Given that GitHub GraphQL API is accessible only with an access token, I set up an OAuth2 request to grab the access token and then tried to fire a simple GraphQL query.
OAuth2 flow gives me the token, but when I send the query, I get HTTP 422.
Here below simplified snippets from my own code:
Prepare the URL to display on UI side, to let user click it and perform login with GitHub
getGitHubAuthenticationURL(): string {
const searchParams = new URLSearchParams({
client_id,
state,
login,
scope,
});
return `https://github.com/login/oauth/authorize?${searchParams}`;
}
My ExpressJs server listening to GitHub OAuth2 responses
httpServer.get("/from-github/oauth-callback", async (req, res) => {
const {
query: { code, state },
} = req;
const accessToken = await requestGitHubAccessToken(code as string);
[...]
});
Requesting access token
async requestToken(code: string): Promise<string> {
const { data } = await axios.post(
"https://github.com/login/oauth/access_token",
{
client_id,
client_secret,
code
},
{
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
}
);
return data.access_token;
}
Firing simple graphql query
const data = await axios.post(
"https://graphql.github.com/graphql/proxy",
{ query: "{ viewer { login } }"},
{
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
}
);
Do you guys have any clue?
Perhaps I am doing something wrong with the OAuth2 flow? As in most of the examples I found on the web, a personal token is used for this purpose, generated on GitHub, but I would like to use OAuth2 instead.
Thanks in advance for any help, I really appreciate it!
EDIT
I changed the query from { query: "query { viewer { login } }"} to { query: "{ viewer { login } }"}, nonetheless, the issue is still present.
I finally found the solution:
Change the URL from https://graphql.github.com/graphql/proxy to https://api.github.com/graphql, see here
Add the following HTTP headers
"Content-Type": "application/json"
"Content-Length"
"User-Agent"
Hope this will help others out there.
So I am using a Third-party API called graphhopper API.
First I used fetch() to call the API and it works but when I use the Axios I get a CORS error.
// THIS WORKS OKAY :)
const response = await fetch(`${graphHopperUrl}/optimize?key=${graphHopperApiKey}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(problem)
})
// DOESN'T WORK :(
const response = await this.$axios.post(
`${graphHopperUrl}/optimize?key=${graphHopperApiKey}`,
problem,
)
I am using react as a front end for a wordpress site. From a form i am trying to POST data to wordpress using axios and the wp-api. Below is how I am trying to do this, but I keep getting:
code: "rest_cannot_create", message: "Sorry, you are not allowed to
create posts as this user.",…} code : "rest_cannot_create" data :
{status: 401} message : "Sorry, you are not allowed to create posts as
this user."
const AUTH_OBJ = 'OAuth oauth_consumer_key="hMZQANcBegerge",oauth_token="eger",oauth_signature_method="HMAC-SHA1",oauth_timestamp="1496325588",oauth_nonce="oligrgGalWv",oauth_version="1.0",oauth_signature="v%2f4tiFyH1H46XKBXp6orthejy8Q44%253D"';
const URL = 'http://TEST.COM/wp-json/wp/v2/TEST';
axios.post(URL,
querystring.stringify({
name: this.props.name
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': AUTH_OBJ
}
}).then((response) => {
console.log('Response: ', response);
if(response.status === 200) {
console.log('RESPONSE 200');
}
});
I have it working using PostMan but cannot get this to work otherwise.
p.s All tokens etc in this post are just made up for example.
I am trying to call a URL through XHR.post on the DOJO 1.8. I need catch the STATUS property and getHeader() from promise response, but the problem is, when I call my URL with POST I don't have any promise, and when I call with GET I have all properties that I need, but I only can send the request as POST.
The most strange is that I have another code in AngularJS which works well, this code does the same thing. I am testing DOJO and AngularJS.
I need catch the STATUS information to check if it is 201(created), if true I need catch getHeader('location') and call the URL that I picked up from getHeader('location').
Look at my method in Dojo 1.8:
checkCreation: function(typeFile, id){
var promise = xhr('/rest/list/one', {
handleAs: 'json',
method: 'post',
accepts: 'application/json',
headers: {
Accept: 'application/json',
id: id,
type: typeFile
}
});
promise.response.then(function(response) {
console.log("status", response.status);
console.log("options", response.options);
console.log("url", response.url);
console.log("timestamp", response.options.timestamp);
console.log(response);
});
},
I discovered the problem, I commented the lines followings and now works fine.
//handleAs: 'json',
//accepts: 'application/json',
The handleAs you need to use only when you have a JSON response. About "accepts" I haven't found what difference between "accept" and "Accept"(inside headers) yet.
Now I can take my informations:
console.log('location: ', response.getHeader('location'));
console.log("status: ", response.status);