You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
RomainMazB
6 years agoExplorer | Level 3
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:
Type...
- 6 years ago
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.
Greg-DB
Dropbox Staff
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?
RomainMazB
6 years agoExplorer | Level 3
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-DB6 years agoDropbox Staff
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.
- RomainMazB6 years agoExplorer | Level 3
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.
5,915 PostsLatest Activity: 6 hours agoIf you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!