Why does fetching an url with axios results in a CORS error?

Question

In my React application using axios, I'm fetching an url. I have an error telling me that my fetch has been blocked by CORS policy and No 'Access-Control-Allow-Origin' header is present on the requested resource. But when i click on my url in my console, i'm able to access the url. Why am i not able to access the url from my react app using axios while i can from my navigator ? I suspect i'm missing a proxy to be able to access this url. Is that the answer ?

Below is the source code for my fetch.

const url = `https://www.waze.com/row-partnerhub-api/waze-map/streetsInfo?lat=${lat}&lon=${lon}&token=${process.env.REACT_APP_WAZE_GEOCODER}`;
    const config = {
      headers: {
        'Access-Control-Allow-Origin': '*',
        'cross-origin-opener-policy' : 'same-origin-allow-popups',
        'content-type':'application/json',
      }
    };
    try {
      const response = await axios.get(url,config);

Answer 1

Access-Control-Allow-Origin is a response header, setting it on the request doesn't do anything.

But yes – that resource doesn't allow cross-origin access, so you can't access it using a browser from another origin. A proxy would get around that, but that means you'd have to set up and maintain that proxy. (For development, tooling such as Vite can do that for you, but that won't do for production use.)

But when i click on my url in my console, i'm able to access the url.

Presumably it opens in a new tab and all that? Then you're making a regular request to it, not from another origin.