We Want to Hear From You! What Do You Want to See on the Community? Tell us here!
Forum Discussion
Solved
TypeError: e.clone is not a function
Hi All!
I'm working on a VueJS App with Axios library.
I just want to authorize my WebApp to access to my DropBox account with OAuth2 but I'm stuck at the beginning because it returns me:
TypeError: e.clone is not a function
Here is my Vue App code to generate the access token:
beforeCreate() {
delete axios.defaults.headers.common['X-CSRF-TOKEN']; // Forced to use that with axios
window.dbx = new this.$root.Dropbox({ // Create the Dropbox instance, works well
fetch: axios,
clientId: 'myClientID',
clientSecret: 'myClientSecret'
});
},
async created() {
// Search for access token in local storage
if(localStorage.dbx_token) this.dbx_token = localStorage.dbx_token;
else {
let params = new URL(window.location.href).searchParams, // Or currently asked
code = params.get("code"),
csrf_token = params.get("state");
if (csrf_token == this.csrf_token) { // OAuth returns
try { // Try to get an access token
this.dbx_token = await dbx.getAccessTokenFromCode('http://localhost/fanny/public/', code);
} catch(error) {
console.log(error);
}
}
}
// If found, generate DBX API
if(this.dbx_token) dbx.setAccessToken(this.dbx_token);
}
Access token always returns undefined and console says TypeError: e.clone is not a function
An idea?
Thanks, I better understand the issue now.
I see that you're passing in axios as your fetch library, and the failure is occurring in the Dropbox JavaScript library when attempting to process the OAuth result. I've reproduced this by likewise passing in axios. I've also confirmed that actual API calls fail when using axios.
As far as I can tell, axios does not officially conform to the fetch standard (I don't see any reference to it on the axios page), so I don't think we can consider this officially supported. I'll pass this along as a feature request for support for axios, but I can't promise if or when that might be implemented.
Instead, I recommend passing in some HTTP client that supports the fetch standard, such as isomorphic-fetch, like in the example here.
4 Replies
- Greg-DB
Dropbox Community Moderator
We don't have any specific support for vue.js in particular, but we'll be happy to try and take a look.
First, do you get a stack trace for this? What specific line is this failing in?
Hi, thanks for your time.
I don't think it's a Vue problem. I suppose it's an Axios configuration.
For those who don't know Axios library, it parses JSON automatically all response/request data. I think there is the problem (not sure) but don't know how to fix it.
The XHR success but in the callback of Dropbox instance, there is a clone function, which fails
TypeError: e.clone is not a function at app.js:43042 at app.js:43042 app.js:34227 XHR finished loading: POST "https://api.dropboxapi.com/oauth2/token?code=2_ILSbfhKnAAAAAAAAAAnF7twcUKrhL6CAKY29ZL-iY&grant_type=authorization_code&redirect_uri=http://localhost/fanny/public/&client_id=myAppID&client_secret=myAppSecret".Directly from the Dropbox.js:
getAccessTokenFromCode(redirectUri, code) { const clientId = this.getClientId(); const clientSecret = this.getClientSecret(); if (!clientId) { throw new Error('A client id is required. You can set the client id using .setClientId().'); } if (!clientSecret) { throw new Error('A client secret is required. You can set the client id using .setClientSecret().'); } const path = `https://api.dropboxapi.com/oauth2/token?code=${code}&\ grant_type=authorization_code&redirect_uri=${redirectUri}&\ client_id=${clientId}&client_secret=${clientSecret}`; const fetchOptions = { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }; return this.fetch(path, fetchOptions) .then(res => parseBodyToType(res)) // !!!! It fails here! !!!! .then(([res, data]) => { // maintaining existing API for error codes not equal to 200 range if (!res.ok) { // eslint-disable-next-line no-throw-literal throw { error: data, response: res, status: res.status, }; } return data.access_token; }); }function parseBodyToType(res) { const clone = res.clone(); return new Promise((resolve) => { res.json() .then(data => resolve(data)) .catch(() => clone.text().then(data => resolve(data))); }).then(data => [res, data]); }- Greg-DB
Thanks, I better understand the issue now.
I see that you're passing in axios as your fetch library, and the failure is occurring in the Dropbox JavaScript library when attempting to process the OAuth result. I've reproduced this by likewise passing in axios. I've also confirmed that actual API calls fail when using axios.
As far as I can tell, axios does not officially conform to the fetch standard (I don't see any reference to it on the axios page), so I don't think we can consider this officially supported. I'll pass this along as a feature request for support for axios, but I can't promise if or when that might be implemented.
Instead, I recommend passing in some HTTP client that supports the fetch standard, such as isomorphic-fetch, like in the example here.
Hi.
Thanks for the suggestion...
After many hours trying to configure Axios to pass this issue, I was about to change the fetch library for this project...
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
