Child Item

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?

Find more posts tagged with

API

Abuse

Accepted answers

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.

All comments

Greg-DB

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

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

parseBodyToType

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.

Instead, I recommend passing in some HTTP client that supports the fetch standard, such as isomorphic-fetch, like in the example here.

RomainMazB

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...