I am building a Next.js website with an Asp.Net Core API. The API runs on the default port of 5001 (https) and the Next.js server runs on the default port 3000. I'm trying to make a GET request to the API from my Next.js website, however, I receive the following error Error: unable to verify the first certificate.
When I manually navigate to the URL of the API in the browser I get the following JSON response
[
{
"electionId":1,
"electionType":"General",
"electionDate":"2020-12-22T11:01:42.6330892",
"votes":null,
"candidate_Votes":null
}
]
Which is what I want to display in a table
What I've done:
I've setup Next.js to run using https, which didn't resolve the issue.
server.js
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const httpsOptions = {
key: fs.readFileSync('./localhost.key'),
cert: fs.readFileSync('./localhost.crt')
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('> Ready on https://localhost:3000');
});
});
I disabled SSL verification which allowed me to make the request, however this is not the best practice for production.
I was wondering if because the certificates I created for Next.js are different from what was automatically created by the .Net Core API, that I am still getting the verification error. Or because both applications are on different ports.
How I am making the request:
export async function getStaticProps() {
const data = await axios.get("https://localhost:5001/api/Elections");
if (!data) {
return {
notFound: true,
}
}
return {
props: {
data,
}
}
}
I also tried using Postman to make the request and received a similar SSL Error. If I disable SSL certification verification then it works as expected.
