On my local development machine I have created a backend in Python and a frontend in React.
Backend
I use Flask API in Python to generate the backend, and for the certificate I have generated a self created one using the following command in Ubuntu:
openssl req -x509 -newkey rsa:4096 -nodes -out cert.pem -keyout key.pem -days 365
This genrates a self signed certificate.
When I got to my API at https://localhost:5000/api/customers/get_customers I get a list of customers (the data is development data):
[
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 22,
"customer_name": "Juno",
"customer_name_abbreviated": "JUN"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 23,
"customer_name": "Minnie",
"customer_name_abbreviated": "MIN"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 26,
"customer_name": "Aspen",
"customer_name_abbreviated": "ASP"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 29,
"customer_name": "Charlie",
"customer_name_abbreviated": "CHA"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 30,
"customer_name": "Katie",
"customer_name_abbreviated": "KAT"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 31,
"customer_name": "Dolly",
"customer_name_abbreviated": "DOL"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 32,
"customer_name": "Nova",
"customer_name_abbreviated": "NOV"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 33,
"customer_name": "Piper",
"customer_name_abbreviated": "PIP"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 37,
"customer_name": "Belle",
"customer_name_abbreviated": "BEL"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 38,
"customer_name": "Harper",
"customer_name_abbreviated": "HAR"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:16:36 GMT",
"customer_id": 40,
"customer_name": "Daisy",
"customer_name_abbreviated": "DAI"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 41,
"customer_name": "Ava",
"customer_name_abbreviated": "AVA"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 42,
"customer_name": "Lacey",
"customer_name_abbreviated": "LAC"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 43,
"customer_name": "Millie",
"customer_name_abbreviated": "MIL"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 44,
"customer_name": "Trixie",
"customer_name_abbreviated": "TRI"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 45,
"customer_name": "Zoey",
"customer_name_abbreviated": "ZOE"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 46,
"customer_name": "Luna",
"customer_name_abbreviated": "LUN"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 47,
"customer_name": "Lola",
"customer_name_abbreviated": "LOL"
},
{
"customer_created_timestamp": "Fri, 07 Oct 2022 14:20:56 GMT",
"customer_id": 48,
"customer_name": "Olive",
"customer_name_abbreviated": "OLI"
}
]
Frontend
Now In my frontend I want to use React to get the customers and print them in a table. However I get the error "net::ERR_CERT_AUTHORITY_INVALID". I guess its because of the certificate.
This is my Customers.js
import React from 'react';
import axios from 'axios';
export default class Customers extends React.Component {
state = {
customers: []
}
componentDidMount() {
let config = {
headers: {
Accept: 'application/json',
'Access-Control-Allow-Origin': '*',
}
}
let data = {
'HTTP_CONTENT_LANGUAGE': 'no',
}
axios.get('https://localhost:5000/api/customers/get_customers', data, config)
.then(res => {
const customers = res.data;
this.setState({ customers });
})
};
render() {
return (
<table className="hor-zebra">
<thead>
<tr>
<th>
<span><a href="#">ID</a></span>
</th>
<th>
<span><a href="#">Name</a></span>
</th>
<th>
<span><a href="#">Abbreviated</a></span>
</th>
<th>
<span><a href="#">Created</a></span>
</th>
</tr>
</thead>
<tbody>
{
this.state.customers
.map((customer, index) => {
return (
<tr key={index}>
<td><span>{index}</span></td>
<td><span>{customer.customer_name}</span></td>
<td><span>{customer.customer_name_abbreviated}</span></td>
<td><span>{customer.customer_created_timestamp}</span></td>
</tr>
);
}
)
}
</tbody>
</table>
)
};
};
This is my App.js
import './App.css';
import React from 'react';
import Customers from './components/Customers.js';
function App() {
return (
<div className="app">
<div className="container">
<header>
<p>Customers</p>
</header>
<main>
<Customers />
</main>
</div>
</div>
);
}
export default App;
What I need help with
I need either a mode of creating a certificate (that is free) or I need to somehow make React accept the certificate.
I read on How to configure axios to use SSL certificate? that you could add
const httpsAgent = new https.Agent({ ca: MY_CA_BUNDLE });
However where do I add this? Is this correct? I have in my backend files named "key.pem" and "cert.pem".
