Javascript 使用SSL证书执行axios请求

我尝试使用SSL证书查询Puppet DB API进行身份验证。因此，在名为Version.js的组件中，我执行了以下未完成的代码：

import fs from 'fs';
import axios from 'axios';
import https from 'https';
import { readFileSync } from 'fs';

let versionAPI = 'https://puppetdb:8081/pdb/query/v4/version';


let agent = new https.Agent({
    cacert: fs.readFileSync('ca.pem'),
    cert: fs.readFileSync('cert.pem'),
    key: fs.readFileSync('key.pem')
});

class Version extends Component {
getDBVersion = () => {
        axios.get(versionAPI, agent)
        .then(response => {
            const ver = response;
            console.log(ver);
        })
    }
render() {
return (
<Button click with trigger this.getDBVersion()>
);
}

export default Version;

添加package.json 错误消息：

TypeError: Object(...) is not a function
Module../src/Components/AgentPages/Version.js
I:/node/front-end_ui/src/Components/AgentPages/Version.js:14
  11 | 
  12 | 
  13 | let agent = new https.Agent({
> 14 |     cacert: readFileSync('./ca.pem'),

请帮忙

您可以使用Web包开发服务器的选项。编辑package.json部分脚本。将反应脚本更改为开始

对于Windows cmd.exe，设置HTTPS=true&&react脚本启动

对于Linux，macOS Bash HTTPS=true

您可以使用webpack dev服务器的选项。编辑package.json部分脚本。将反应脚本更改为开始

对于Windows cmd.exe，设置HTTPS=true&&react脚本启动

对于Linux，macOS Bash HTTPS=true

---

谢谢你的回复。你的意思是我可以运行：node src\server.js-https-cert=../../../ssl/server.pem-key=../../ssl/server.pem-cacert=../../ssl/ca.pem。即使我可以运行它，我对server.js做了哪些更改，如何初始化到Puppet API的代理连接，以及如何呈现GET-request API响应？@reactjs_user-https需要用于前端开发服务器。你能为前端显示你的开发配置吗？我现在没有使用任何webpack.config.js文件。我的应用程序是一个简单的SPA，它发出一些API请求并呈现内容。要使用API进行身份验证，我需要使用SSL证书。我认为在执行axios.get时，读取文件或将其作为头或选项传递是非常容易的。如果我需要创建webpack.config.js并添加一些配置，请告诉我。我很乐意测试它。@reactjs_用户模块fs是Node.js，他在浏览器中不可用。您只需要使用https发送请求。从fs的错误判断，您已经在使用webpack。请显示您的npm命令，它运行前端构建。我只是运行npm start来打开我的UI。我不知道如何使用node.js中的模块“fs”，然后使用http.Agent在前端发出axios请求？谢谢您的回复。你的意思是我可以运行：node src\server.js-https-cert=../../../ssl/server.pem-key=../../ssl/server.pem-cacert=../../ssl/ca.pem。即使我可以运行它，我对server.js做了哪些更改，如何初始化到Puppet API的代理连接，以及如何呈现GET-request API响应？@reactjs_user-https需要用于前端开发服务器。你能为前端显示你的开发配置吗？我现在没有使用任何webpack.config.js文件。我的应用程序是一个简单的SPA，它发出一些API请求并呈现内容。要使用API进行身份验证，我需要使用SSL证书。我认为在执行axios.get时，读取文件或将其作为头或选项传递是非常容易的。如果我需要创建webpack.config.js并添加一些配置，请告诉我。我很乐意测试它。@reactjs_用户模块fs是Node.js，他在浏览器中不可用。您只需要使用https发送请求。从fs的错误判断，您已经在使用webpack。请显示您的npm命令，它运行前端构建。我只是运行npm start来打开我的UI。我不知道如何使用node.js中的模块“fs”，然后使用http.Agent在前端发出axios请求？

{
  "name": "front-end_ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "elasticsearch": "^15.4.1",
    "fs": "0.0.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "node src/server.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },
  "devDependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1"
  },
  "proxy": "http://localhost:80"
}

TypeError: Object(...) is not a function
Module../src/Components/AgentPages/Version.js
I:/node/front-end_ui/src/Components/AgentPages/Version.js:14
  11 | 
  12 | 
  13 | let agent = new https.Agent({
> 14 |     cacert: readFileSync('./ca.pem'),

import axios from 'axios';

let versionAPI = 'https://puppetdb:8081/pdb/query/v4/version';

class Version extends Component {
    getDBVersion = () => {
        axios.get(versionAPI)
        .then(response => {
            const ver = response;
            console.log(ver);
        })
    }
render() {
   return (
      <Button click with trigger this.getDBVersion()>
   );
}

export default Version;