MasterCard Token Fetch Error with ReactJs Frontend

Question

I'm trying to fetch my token from this endpoint on mastercard (https://api.finicity.com/aggregation/v2/partners/authentication) from my react app and I keep getting the error

"ccess to fetch at 'https://api.finicity.com/aggregation/v2/partners/authentication' 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."

I've tried using https and set up a server on ngrok and it still doesnt work, when I use mode:'no-cors', I get no response. This is the relvant code

  const getMasterCardData = async() =>{
    const token = authTokens.access;
    try {
      const response = await fetch('http://127.0.0.1:8000/api/mastercard/', {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${token}`,
        },
      });

      if (response.ok) {
        const data = await response.json();
        console.log(data);
        await getAccessToken(data);
      } else {
        alert('Failed to fetch data');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Something went wrong');
    }



  }

  const getAccessToken = async(data) => {
    try {
      const response = await fetch('https://api.finicity.com/aggregation/v2/partners/authentication', {
        method: 'POST', // Or any other method as required
        headers: {
          'Content-Type': 'application/json',
          'Finicity-App-Key': data.app_key,
          'Accept': 'application/json',
          'Access-Control-Allow-Origin': '*',
          "Access-Control-Allow-Methods": "OPTIONS, GET, POST, PUT, PATCH, DELETE",
       

        },
        body: JSON.stringify({
          "partnerId": data.partner_id,
          "partnerSecret": data.secret_key
        }),
      });
  
      if (response.status === 200) {
        const secondData = await response.json();
        console.log(secondData);
      } else {
        alert('Failed to fetch data from the second endpoint');
      }
    } catch (error) {
      console.error('Error in second API call:', error);
      alert('Something went wrong with the second API call');
    }
  }

I securely stored my keys in my django .env backend and I have confirmed that they are correct multiple times

I tried using mode: no-cors but it still doesnt work, and I added all possible Access-Control headers