MunifTanjim / node-bitbucket

Bitbucket API client for Browser and Node.js
https://bitbucketjs.netlify.app
MIT License
105 stars 31 forks source link

Cross-Origin Request blocked error while using Firefox/Safari #137

Open swapna06 opened 4 months ago

swapna06 commented 4 months ago

Hi, Im getting below error when I tried using bitbucket.workspaces.getWorkspaces() But im sure the issue exists in all the API calls.

Here is the error message

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.bitbucket.org/2.0/workspaces?pagelen=100. 

(Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response)

Upon looking up the code it seems like you are explicitly adding user-agent header to the request. https://github.com/MunifTanjim/node-bitbucket/blob/master/src/endpoint/defaults.ts#L11

It doesn't look like this is compatible with browsers. I get the same error in Safari as well. Chrome is being smart and stripping/ignoring to send this header in the request. So the code works in Chrome but not in other browsers.

Further more I tried to use plain fetch APIs on browser to see if this is an issue is on bitbucket API side. Using plain Fetch API works but using the library to make the same APi call doesn't work.

I'm attaching the comparison of fetch requests made by the library vs regular here. Hope this helps!

The fetch API call im using- (THIS WORKS)

await fetch('https://api.bitbucket.org/2.0/workspaces?pagelen=100', {
      headers: {
        // "User-Agent": "bitbucket.js/2.11.0", removing this to try in firefox
        Accept: 'application/json',
        'Accept-Language': 'en-US,en;q=0.5',
        authorization: 'Basic <OmittedAppTokenForSecurity>',
        'Sec-Fetch-Dest': 'empty',
        'Sec-Fetch-Mode': 'cors',
        'Sec-Fetch-Site': 'cross-site',
      },
      method: 'GET',
      mode: 'cors',
    });

VS The network call made by the library- (THIS DOESNT WORK)

await fetch("https://api.bitbucket.org/2.0/workspaces?pagelen=100", {
  "credentials": "include",
  "headers": {
      "User-Agent": "bitbucket.js/2.11.0",
      "Accept": "application/json",
      "Accept-Language": "en-US,en;q=0.5",
      "authorization": "Basic <OmittedAppTokenForSecurity>",
      "Sec-Fetch-Dest": "empty",
      "Sec-Fetch-Mode": "cors",
      "Sec-Fetch-Site": "cross-site",
      "If-None-Match": "\"9a8039d8cac42bdebefe28aff6ff7f98\""
  },
  "referrer": "https://281422712546-gluestudio.us-west-2.console.aws-dev.amazon.com/",
  "method": "GET",
  "mode": "cors"
});

Is there a way to override these headers on our side?? Like a headers parameter we can pass to the API functions?? Let me know thanks!!