The following python request is grabbing data from a paid API using private API key, and the fetch is working just fine:

import requests

api_key = 'our_private_api_key'
headers = { 'x-api-key': api_key }
params = {}
endpoint = 'our_api_endpoint_url'
resp: dict = requests.get(endpoint, headers=_headers_builder(headers), params=params).json().get('response', {})
resp_data = resp.get('data', None)

When fetching locally in Javascript (React App) using axios, we attempt with similar code, but in JavaScript (with the help of react-query's useQuery):

import { useQuery } from 'react-query';
import axios from 'axios'

async function fetchLiveData() {
    const api_key = 'our_private_api_key';
    const endpoint = 'our_api_endpoint_url';
    const { data } = await axios.get(endpoint, { headers: { 'x-api-key': api_key } });
    return data;
}

const { data, error, isError, isLoading: isLoading25 } = useQuery('posts', fetchLiveData);

...however the following error is thrown from this fetch.

Access to XMLHttpRequest at 'endpoint' 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.

Is this a localhost problem, or is some parameter being omitted from the axios fetch, or is it a permissions issue with the API provider? Or something else? How can we go about troubleshooting this issue?