API request blocked by CORS

JavaScript
1

Hello, I would appreciate if you can help me with the following.
I am trying to call this API but I keep getting this error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://app.pingboard.com/oauth/token?grant_type=client_credentials. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

var request = new XMLHttpRequest();

request.open('POST', 'https://app.pingboard.com/oauth/token?grant_type=client_credentials
');

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

request.onreadystatechange = function () {
 if (this.readyState === 4) {
   console.log('Status:', this.status);
   console.log('Headers:', this.getAllResponseHeaders());
   console.log('Body:', this.responseText);
 }
};

var body = "client_id=9jK&client_secret=Bwg";

request.send(body);

I have the script in a main.js file and I linked to it in an index.html file then I run this file using the live server extension in visual code. Is this possible or am I making a mistake somewhere, any help or pointers will really help. Thanks.

2

Basically this is about sending a request with headers that the API-server accept.
If you own both sides, you can leave the API doors wide open in order to test.

Look at the API manuals if there are any. Or read about CORS for a start.

3

So is what I thought, I do no own the API server so I can not modify the header. I am following this documentation API
Thank you for your reply. I will keep researching.

4

I opted to use an add on to disable CORS while I develop, but I will keep researching for a more viable solution.

5

You can modify your own request header to be accepted as a “legal” visitor to the API. Most API has a “padlock” that you must open with a key. This can be a challenge as the API documentation of many API’s are sometimes overwhelming.

6

I decided to run the code using a server (express.js) to avoid this error. Thank you for all your input.