API access control issue

Hello everyone
I need to retrieve data from a remote server, through an API whose URL I have.
If I use my browser (chrome or firefox) I get the expected result in the form of a JSON file.
If I use the following code

    fetch(URL)
      .then(function(res) {
      if (res.ok) {
        return res.json();
      }
    })
      .then(function(value) {
        console.log(value);
      })
      .catch(function(err) {
      });

I have the error:

Access to fetch at ‘https://www. …’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: 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.

How come it works in the browser and not programmatically?
Is there a way to work around the problem
Of course I do not have access to the server to which I made the request

Thank you for your answers
YC

I think there is a clue in the error message:

set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Thank you very much for your answer
Can you please give me a little more detail to perform this operation, or a link on the implementation of this option.
Thanks

@yvancoyaud My skill here is merely in reading the error message, and pointing it out to you. The developer has, no doubt, ended up with many support calls about this, so they chose to embed a clue in the error message. My next recourse would be to ask Google, or try and work out how to set the mode to no-cors. Over to you now.

client side CORS issues is not the exception but the rule. This (the link below) might help you in understanding and the way to go. I’d also suggest to take a CORS course to understand how it works. It may become a nightmare when working with CDNs if not properly understood.
The ultimate solution that always works is to fetch server side or with a Lambda function (AWS) or something that impersonates a server.
On the client CORS adds some security. You probably would not like it if people fetched content (e.g. images) from your work. If your fetch URL doesn’t want you to fetch from it, there is not much to do about it but … fetch from a server, or like in this link, fetch through a proxy (which is basically like fetching from a server) javascript - Trying to use fetch and pass in mode: no-cors - Stack Overflow.
You may try the few CORS headers you have available for your fetch but if the URL is not set to accept your, there is little you can do.

I was running into this issue myself not too long ago. Basically the error message says that in order to do cross-origin-requests you should set the mode option for fetch, for example like this:

const res = await fetch(url, {method: 'POST', mode: 'cors'});

Unfortunately, it highly depends on the server how it will deal with CORS. In my case the server didn’t respond with the necessary access-control-allow-origin-headers and I was getting an error message every time, despite the requests were successful. The result object indeed reported status 200.
So I followed the advice in the error message and set the mode to no-cors. This will make the request look “correct” for the browser, the downside will be that the response won’t be readable at all. The response object in res in my example above will be there, but its “opaque” an its status won’t be any HTTP status, it will be just 0 etc. So you are limited to a somewhat fire-and-forget functionality.
More information about this can be found here:

Sorry if I’m not much of a help, just my 2cts