MERN deployment CORS issue

[brians]

The issue I’m having is a CORS error, which can easily be fixed by allowing the API domain, however that doesn’t allow me to set cookies on Safari. I set up google domains to try and get my client/server on the same domain, however that is still resulting in a CORS error. The domain looks somethings like this for my client: blog.example.com and the server: api.example.com. I’m wondering if there’s any other solution to resolve this, without having to use CORS.

[brians]

For anyone with this same issue I discovered the solution. Instead of deploying the frontend/backend separately you can build the frontend locally and allow express to serve it, therefore you only have to deploy the backend. I’ll provide some example code below using ES6 imports.

const __dirname = dirname(fileURLToPath(import.meta.url));
app.use(express.static(path.join(__dirname, "../client/dist")));
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/dist/index.html"));
});