Handle CORS between client and server apps

If you're building an app consisting of client and server components which need to interact with each other, you'll need to consider CORS to ensure they're allowed to communicate.

Create the required HTTP request in the client-side of your app, for example:

const response = await fetch('http://localhost:8000/api/resource', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data),
})

Then in your server-side request/response middleware configuration, ensure the appropriate headers are set, for example:

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:5173');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
})

Allow the client app's address as the origin, with permissions to allow the Content-Type header (e.g. for passing application/json data). You may also want to restrict requests to certain verbs, such as:

res.header('Access-Control-Allow-Methods', 'GET, POST');

and allow cookies:

// Client (in fetch request)
credentials: 'include'

// Server
res.header('Access-Control-Allow-Credentials', 'true');