当 API 需要证书和用户/密码时，如何从 HTML 页面（使用链接到 javascript 代码的按钮）运行对 API 的发布请求？

Posted 2023-03-08

【中文标题】当 API 需要证书和用户/密码时，如何从 HTML 页面（使用链接到 javascript 代码的按钮）运行对 API 的发布请求？

【英文标题】：How to run a post request to an API from an HTML page (using a button linked to javascript code) when the API require certificate and user/password?

【发布时间】：2022-01-22 22:08:03

【问题描述】：

我想在 html 页面中添加一些 javascript 代码，以允许任何有权访问该网页的用户将可用的发布请求运行到 API。这些 post 请求在 Postman 中运行良好，但我不确定如何使用 javascript 运行此类请求，因为此 API 不仅需要证书（带有密码），还需要 Postman 中的附加凭证对（用户名和密码）在适当的菜单上以非常直观的方式进行配置。

有人能告诉我如何使用 javascript 从网页运行这些请求吗？也许分享一些示例代码？

提前致谢！

【问题讨论】：

凭据不是问题，只要用户知道它们并且能够在发送请求时提交它们。问题是证书... HTTP 请求是由浏览器发送的，因此浏览器必须能够获取证书并且必须知道密码 - 显然是一个安全问题。自发并根据给定的信息，我绝对会建议不要仅使用前端解决方案！但请向我们展示 Postman 配置和更多 API 信息。

“也许可以分享一些示例代码？” - 根据您的实际要求创建多种不同语言的代码，这是 Postman 已经内置的功能...

不知道这个！谢谢！我已经在尝试了：D

【参考方案1】：

您可以使用 fetch 或 axios 来处理带有 js 的请求

以及使用链接到 javascript 代码的按钮： 你可以使用onclick

我从您的问题以及您可以问我的任何其他问题中都知道这一点

【讨论】：

我使用 Postman 功能创建了我的请求的代码（javascript 提取），我得到了以下结果：

var myHeaders = new Headers(); myHeaders.append("Content-Type", "application/json"); myHeaders.append("Authorization", "Basic 123xpto321"); var raw = JSON.stringify( "path": "/Customers/Organisation/organisation_adm/Account Management/Account Balance/Accounts", "outputType": "pdf" ); var requestOptions = method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' ; fetch("https://api.url/my-endpoint", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));

现在，使用上面的代码，我不确定证书部分是如何处理的，我不确定如何获得请求的结果。代码的结果是错误信息：net::ERR_BAD_SSL_CLIENT_AUTH_CERT