How do I get data as JSON format from the IBM Cloud with a HTTP Request using JavaScript?

Question

When I click on "GET DATA" in my App, I would like to access the data in my IBM Cloud with an HTTP request. I need the data in JSON format. This should be implemented with JavaScript. My current code is here:

function httpRequest() {
  const xhr = new XMLHttpRequest()
//open a get request with the remote server URL
xhr.open("GET", "https://<orgID>.internetofthings.ibmcloud.com/api/v0002/device/types/<typeID>/devices/<deviceID>/state/<logicalInterfaceID>" )
//send the Http request
xhr.send()

//EVENT HANDLERS

//triggered when the response is completed
xhr.onload = function() {
  if (xhr.status === 200) {
    //parse JSON datax`x
    data = JSON.parse(xhr.responseText)
    console.log(data.count)
    console.log(data.products)
  } else if (xhr.status === 404) {
    console.log("No records found")
  }
}

//triggered when a network-level error occurs with the request
xhr.onerror = function() {
  console.log("Network error occurred")
}

//triggered periodically as the client receives data
//used to monitor the progress of the request
xhr.onprogress = function(e) {
  if (e.lengthComputable) {
    console.log(`${e.loaded} B of ${e.total} B loaded!`)
  } else {
    console.log(`${e.loaded} B loaded!`)
  }
}
}

.btn {
  cursor: pointer;
  background-color: #555;
  color: #fff;
  display: inline-block;
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
}

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/css/styles.css"/>
    <script src="src/js/script.js"></script>
    <title>GET DATA</title>
    <div class="btn" onclick="httpRequest()">
      GET DATA
    </div>   
  </head>
  <body>
  </body>
</html>

The placeholder orgID, typeID, deviceID, logicalInterfaceID in my code etc. have of course been replaced by the correct ID.

The problem is, I don't know how to include the username and password in the URL so that I can access the IBM Cloud.

https://www.ibm.com/docs/en/mapms/1_cloud?topic=reference-application-rest-apis

@Marc I added the problem in my question. – software Dec 11 '21 at 12:54 — software, Dec 11 '21 at 12:54
Did you try `https://:@.restof.url`? – Daantje Dec 11 '21 at 12:57 — Daantje, Dec 11 '21 at 12:57

Spankied · Accepted Answer · 2021-12-11T13:25:42.560

1

Checkout this post on What is -u flag on cURL actually doing?

You can base64 encode your credentials using the native btoa() function then set them in the authorization req header.

var xhr = new XMLHttpRequest();
xhr.open( "GET", "https://<orgID>...");
xhr.setRequestHeader("Authorization", `Basic ${btoa('username:password')}`);    
xhr.send();

edited Dec 11 '21 at 13:25

answered Dec 11 '21 at 13:10

Spankied

1,626
13
21

I get this error message, when using your code. "Uncaught DOMException: XMLHttpRequest.setRequestHeader: XMLHttpRequest state must be OPENED." – software Dec 11 '21 at 13:24
Google search says, "You need to call .open(..) before setting the request headers.". I will change my answer accordingly. – Spankied Dec 11 '21 at 13:25
Calling .open(..) before setting the request headers led to this error. - Cross-origin request blocked: The same-source rule prohibits reading the external resource on https://... . (Reason: CORS header 'Access-Control-Allow-Origin' is missing). Status code: 200 - Cross-origin request blocked: The same-source rule prohibits reading the external resource on https://... . (Reason: CORS request failed). Status code: (null). – software Dec 11 '21 at 13:30
In my root folder I have the .htaccess file with the content. Header set Access-Control-Allow-Origin "*". Nevertheless, the same error message comes up. – software Dec 11 '21 at 13:38
The request to this resource shouldn't be made from the client (it exposes your private username/password). Rather you should setup your own server, and make a request to your server, that then makes a request to IBM. Servers aren't limited to CORS restrictions like browsers. As a quick hack/workaround, you can use a reverse proxy server specifically designed to workaround cors issues, Change the url to "https://cors-anywhere.herokuapp.com/https://..." – Spankied Dec 11 '21 at 13:39
cors-anywhere is no longer a public service for production – charlietfl Dec 11 '21 at 14:07
It's meant for developing, not production. It's a hacky workaround. See: https://github.com/Rob--W/cors-anywhere/issues/301. The main issue isn't even cors here, theres a huge security issue making requests from a client to a 3rd party service under your name, using your unencrypted credentials. This request should be hidden on your backend. – Spankied Dec 11 '21 at 14:14

How do I get data as JSON format from the IBM Cloud with a HTTP Request using JavaScript?

1 Answers1