CORS issue on Localhost, MULTIPLE workarounds have failed - reactjs

Question

I am in tears as I type this, sobbing into my keyboard
I have wasted over a week trying to understand what is wrong. I can no longer learn or develop. I am going to have to give up learning to code if I cannot fix this.
I understand what CORS is. If I had the ability to edit the API server, I would, but I do not. I must use a 3rd party API. I do not have the time to develop my own to work with. I am UNABLE to develop using anything but a local server. I need to stop CORS issues.
I have been trying to fix this problem for days. I am at a complete standstill with my learning. A week of tears and frustratiion has ben spent on this.
I CANNOT:
use https://cors-anywhere.herokuapp.com. This fails and CORS still screams:
Access to XMLHttpRequest at 'https://cors-anywhere.herokuapp.com/https://randomuser.me/api/?page=1&results=10' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Develop non-locally
Proxy. Package.json just ignores it. I have made multiple attempts to use proxying to avoid CORS. All attempts have ended in complete failure.
I legitimately do not know what to do. This is my code. Please help me, I am in tears and I cannot learn React anymore until this is fixed.
import axios from "axios";
let getFriends = () => {
const config = {
method: "GET",
url: "https://cors-anywhere.herokuapp.com/https://randomuser.me/api/?page=1&results=10",
crossdomain: true,
headers: {
"Content-Type": "application/json"
},
};
return axios(config);
};
export { getFriends };

Answer 1

The reason you are going crazy trying to find a solution is because there is nothing YOU can do about CORS. Changing any header as the other solution recommends won't work, the server will still flag any origins which it does not allow calls from!
This is a value controlled by the SERVER whose API you are calling. And, as the error says, the server you are calling does not accept connections from localhost:3000.
As long as you are making requests from a browser that is on localhost:3000 to this API, you'll be hit with CORS issues.
If you want to ensure that the API itself is not broken, use a different tool like Postman to call to the API. This is like a 'server to server' call, and as such does not require CORS checks.
EDIT: The following call to the random user API seems to work:
import React, { useEffect } from 'react';
function App() {
const fetchRandomUsers = async () => {
const response = await fetch("https://randomuser.me/api/?page=1&results=10")
const json = await response.json()
json.results.forEach((result) => {
console.log(result)
})
}
// On mount, fetch random users
useEffect(() => {
fetchRandomUsers()
}, [])
return (
<></>
);
}
export default App;