HTTPS between frontend and backend - vue.js

Question

I am developing a website using Vue.js, and I have implemented HTTPS in my webpage.
Right now the website is basically static, no communications between itself and the backend server.
If I wanted to add features for instance, login, via a backend server which is on the same machine as the frontend server.
Do I need to get another SSL certificate to make to communication between frontend and backend through HTTPS?
Is there any way to make the SSL certificate work on the whole domain?

Answer 1

You have a few options here
Proxy API requests to your backend service
This means that your HTTP server (eg NGINX) uses your built Vue app (eg the dist folder contents) as its document root and creates a reverse proxy for requests to your API service. For example, say you have a backend service running on port 3000
location /api {
proxy_pass http://localhost:3000/
}
Then your Vue app can make requests to /api/whatever.
During development, you can mirror this using the devServer.proxy setting in vue.config.js
module.exports = {
devServer: {
proxy: {
"^/api": "http://localhost:3000/"
}
}
}
Use a wildcard certificate and run your backend service at a sub-domain, eg
Frontend - https://example.com
Backend - https://api.example.com
Just get two SSL certificates for your two domains. They're free after all
Keep in mind, options #2 and #3 will need you to enable CORS support whereas that is not required for option #1.