CORS and Atlas data API

Hello, I have a simple static website using HTML, CSS and JS. I am trying to connect to my MongoDB instance and have been running into the following error:

Access to fetch at '
from origin 'http://localhost:63342' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 
'Access-Control-Allow-Origin' header is present on the requested 
resource. If an opaque response serves your needs, set the request's 
mode to 'no-cors' to fetch the resource with CORS disabled.

My code is as follows:

const endpointUrl = ``;

const headers = {
    'Content-Type': 'application/json',
    'api-key': `${apiKey}`,
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT,DELETE',
    'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization'

var payload = {
    'dataSource': 'Cluster0',
    'database': 'GoogleForms',
    'collection': 'reponses'

const options = {
    method: 'POST',
    payload: JSON.stringify(payload)

fetch(endpointUrl, options)
    .then(response => response.json())
    .then(data => {
        const dataList = document.getElementById('data-list');
        data.forEach(item => {
            const li = document.createElement('li');
            li.textContent = JSON.stringify(item);
    .catch(error => console.log(error));

My application does not use NodeJS and would like to stick to it.

Requesting help to drop this ticket, as I was able to resolve this using the Bearer Authentication.