What I need for my project

[SeaForeEx]

I am creating an app that lets comic book store owners add weekly titles to their customers' virtual pull boxes. I have all the mechanics in place where you can add titles to pull boxes but I need a database to use instead of my current seeded data.

I want this week's data to show up when I click on comics.

Here are my promises set up to get Tuesday and Wednesday's data (I took out my username/password for privacy):

const getAllBooksByTuesdays = () => new Promise((resolve, reject) => {
  // Define your username and password for Basic Authentication
  const username = 'My User Name';
  const password = 'My Password';

  // Create a base64-encoded credentials string
  const base64Credentials = btoa(`${username}:${password}`);

  // Fetches data using the provided endpoint with Basic Authentication
  fetch('https://metron.cloud/api/issue/?store_date=2023-09-05', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Basic ${base64Credentials}`,
    },
  })
    // Converts the response to JSON.
    .then((response) => response.json())
    .then((data) => {
      // Resolves with an array of book data or an empty array
      if (data) {
        resolve(Object.values(data));
      } else {
        resolve([]);
      }
    })
    // Rejects if there's an error
    .catch(reject);
});

const getAllBooksByWednesdays = () => new Promise((resolve, reject) => {
  // Define your username and password for Basic Authentication
  const username = 'My User Name';
  const password = 'My Password';

  // Create a base64-encoded credentials string
  const base64Credentials = btoa(`${username}:${password}`);

  // Fetches data using the provided endpoint with Basic Authentication
  fetch('https://metron.cloud/api/issue/?store_date=2023-09-06', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Basic ${base64Credentials}`, // Include Basic Authentication header
    },
  })
    // Converts the response to JSON.
    .then((response) => response.json())
    .then((data) => {
      // Resolves with an array of book data or an empty array
      if (data) {
        resolve(Object.values(data));
      } else {
        resolve([]);
      }
    })
    // Rejects if there's an error
    .catch(reject);
});

Here is the function at my books index page for displaying the data:

const displayBooks = () => {
    const booksByTuesdays = getAllBooksByTuesdays();
    const booksByWednesdays = getAllBooksByWednesdays();

    Promise.all([booksByTuesdays, booksByWednesdays])
      .then(([tuesdaysData, wednesdaysData]) => {
        // Combine or process the data as needed
        const combinedData = [...tuesdaysData, ...wednesdaysData];
        setBooks(combinedData);
      })
      .catch((error) => {
        console.error('Error fetching records:', error);
      });
  };

When I run my page, here are the error messages I get in the console:

Access to fetch at 'https://metron.cloud/api/issue/?store_date=2023-09-05' from origin 'http://localhost:3000' 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.

Access to fetch at 'https://metron.cloud/api/issue/?store_date=2023-09-06' from origin 'http://localhost:3000' 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.

Not quite sure where to go from here.

[SeaForeEx]

It took a two hour coding session with some people, I fixed my issues by using the back end to access the data, now I'm getting a 429 Error for Too Many Requests...