Выполнить запрос ax ios с сертификатами SSL React JS - PullRequest
1 голос
/ 03 февраля 2020

Я пытаюсь запросить API Puppet DB (https://puppet.com/docs/puppetdb/latest/api/query/tutorial.html), используя SSL-сертификаты для аутентификации. Поэтому в моем компоненте под названием 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;

Эта ошибка с fs.readFileSyn c не является ошибкой функции: "" TypeError: fs__WEBPACK_IMPORTED_MODULE_6___default .a.readFileSyn c не является функцией ""

Я обнаружил, что я не могу предоставить эти сертификаты, используя мой код переднего плана, и единственный вариант - использовать сервер узла. js файл с таким же кодом, вставленным выше.

Прямо сейчас, мой сервер. js также работает как прокси-сервер CORS, может кто-нибудь помочь мне внести изменения в него для запроса ios топора также. Мне просто нужно несколько шагов, чтобы: 1. внести изменения на сервере. js 2. как использовать его в моем компоненте, сделав вызов ax ios в моем интерфейсе 3. любые настройки веб-пакета 4. все остальное требуется

Текущий сервер. js выглядит следующим образом:

var express = require('express')
var request = require('request')
var cors = require('cors')
var app = express()

app.use(cors())

app.use('/', function(req, res) {
  var url = 'https://' +
    req.get('host').replace('localhost:80', 'puppetdb:8081') + req.url
  req.pipe(request({ qs:req.query, uri: url })).pipe(res);
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

Добавление пакета. json

{
  "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'),

Пожалуйста, помогите !!!

1 Ответ

0 голосов
/ 03 февраля 2020

Вы можете использовать опцию --https для webpack-dev-server. Отредактируйте пакет. json раздел сценарии . Измените react-scripts start на

Для Windows (cmd.exe) set HTTPS=true&&react-scripts start

Для Linux, macOS (Bash) HTTPS=true react-scripts start

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;
...