Gitlab API and the Same Origin Policy

We use Gitlab SaaS. We want our electron app to add new public keys to users with calls to the GitLab API. A few examples of the calls include…

…testing our ability to access the API:

https://gitlab.com

…getting an access token:

https://gitlab.com/oauth/authorize?client_id={...}&redirect_uri=http://localhost:8080/&response_type=code&state=${...}&scope=api&code_challenge=${...}&code_challenge_method=S256

… and getting the user ID that corresponds to an access token:

https://gitlab.com/oauth/token/info?access_token={...}

Our electron app uses Vue for the frontend. Here’s how we call the API in the methods section of the app:

const currURL = gitlabWindow.webContents.getURL();
console.log(currURL)

const testAPI = "https://gitlab.com"

// This is the simplest possible API request we could make. We use it to test access.

axios.get(testAPI, {})
.then(function (response) {
     //handle success
     console.log("RESPONSE RECEIVED! Please reference the response below:")
     console.log(response);
})
.catch(function (response) {
     //handle error
     console.log("ERROR ALERT! Please reference the response below:")
     console.log(response);
});

gitlabWindow.close();

In the electron app, the calls return an error:

Access to XMLHttpRequest at 'https://gitlab.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I thought we could blame the same origin policy here, since our app and gitlab.com are different hosts. But using postman to call the same URL works. Where does the error above come from?

Thanks for your help!

This error typically occurs in web development when making cross-origin requests. This error is related to the same-origin policy implemented by web browsers for security reasons. The same-origin policy restricts web pages from making requests to a different domain unless the server explicitly allows it by including the ‘Access-Control-Allow-Origin’ header in the response. To resolve this issue, the server hosting the requested resource needs to include the appropriate ‘Access-Control-Allow-Origin’ header, specifying the domain or origins allowed to access the resource. This can be done by configuring the server’s response headers or by using server-side middleware or frameworks that handle cross-origin requests.

JSON with Padding is just a way to circumvent same-origin policy, when CORS is not an option. This is risky and a bad practice. Avoid using this.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999