Skip to content

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

@swapna06

Description

@swapna06

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions