如何通过使用 JavaScript 的 HTTP 请求从 IBM Cloud 获取 JSON 格式的数据？
Posted
技术标签:
【中文标题】如何通过使用 JavaScript 的 HTTP 请求从 IBM Cloud 获取 JSON 格式的数据？【英文标题】：How do I get data as JSON format from the IBM Cloud with a HTTP Request using JavaScript? 【发布时间】：2022-01-15 18:38:43 【问题描述】：当我在我的应用程序中单击“获取数据”时，我想通过 HTTP 请求访问我的 IBM Cloud 中的数据。我需要 JSON 格式的数据。这应该用 javascript 来实现。 我当前的代码在这里：
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>我的代码中的占位符orgID、typeID、deviceID、logicalInterfaceID等当然已经被替换了使用正确的 ID。
问题是，我不知道如何在 URL 中包含用户名和密码以便访问 IBM Cloud。
https://www.ibm.com/docs/en/mapms/1_cloud?topic=reference-application-rest-apis
【问题讨论】：
还有什么问题？！ @Marc 我在我的问题中添加了问题。 你试过https://<user>:<password>@<orgID>.restof.url吗？
【参考方案1】：
在What is -u flag on cURL actually doing?查看这篇文章
您可以使用本机 btoa() 函数对您的凭据进行 base64 编码，然后将它们设置在授权请求标头中。
var xhr = new XMLHttpRequest();
xhr.open( "GET", "https://<orgID>...");
xhr.setRequestHeader("Authorization", `Basic $btoa('username:password')`);
xhr.send();
【讨论】：
我在使用您的代码时收到此错误消息。 “未捕获的 DOMException：XMLHttpRequest.setRequestHeader：XMLHttpRequest 状态必须打开。” Google 搜索显示，“您需要在设置请求标头之前调用 .open(..)。”。我会相应地改变我的答案。 在设置请求标头之前调用 .open(..) 会导致此错误。 - 跨域请求被阻止：同源规则禁止读取 https://... 上的外部资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。状态码：200 - 跨域请求被阻止：同源规则禁止读取 https://... 上的外部资源。 （原因：CORS 请求失败）。状态码：（空）。 在我的根文件夹中，我有一个包含内容的 .htaccess 文件。标头设置 Access-Control-Allow-Origin "*"。然而，同样的错误信息出现了。 不应从客户端发出对该资源的请求（它会暴露您的私人用户名/密码）。相反，您应该设置自己的服务器，并向您的服务器发出请求，然后再向 IBM 发出请求。服务器不限于浏览器等 CORS 限制。作为一种快速破解/解决方法，您可以使用专门设计用于解决 cors 问题的反向代理服务器，将 url 更改为“cors-anywhere.herokuapp.com/https://<orgID>...”以上是关于如何通过使用 JavaScript 的 HTTP 请求从 IBM Cloud 获取 JSON 格式的数据？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过分析 JavaScript & HTML 来检测 HTTP 请求？