CORS Policy always blocks my access to azure API from my react app, while it is working with Postman

I have a GET API from azure that generates a token when the page loads. and I need to connect it with my react app. I tried the API first on Postman, everything worked successfully and I got a generated token. After that, I used axios to connect with the API in my react app. But everytime I get this error message that says “Access to XMLHttpRequest at ‘https://myTokenAPI/api/[email protected]’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.“

{
“message”: “Network Error”,
“name”: “AxiosError”,
“stack”: “AxiosError: Network Errorn at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vite/deps/axios.js?v=03d0e2b6:1450:14)n at Axios.request (http://localhost:5173/node_modules/.vite/deps/axios.js?v=03d0e2b6:1780:41)”,
“config”: {
“transitional”: {
“silentJSONParsing”: true,
“forcedJSONParsing”: true,
“clarifyTimeoutError”: false
},
“adapter”: [
“xhr”,
“http”
],
“transformRequest”: [
null
],
“transformResponse”: [
null
],
“timeout”: 0,
“xsrfCookieName”: “XSRF-TOKEN”,
“xsrfHeaderName”: “X-XSRF-TOKEN”,
“maxContentLength”: -1,
“maxBodyLength”: -1,
“env”: {},
“headers”: {
“Accept”: “application/json, text/plain, /“,
“tenant”: “secret value that I can’t show”,
“Ocp-Apim-Subscription-Key”: “secret value that I can’t show”
},
“method”: “get”,
“url”: “https://myTokenAPI/api/[email protected]”
},
“code”: “ERR_NETWORK”,
“status”: null
}

my react code:
I’m sorry about showing the endpoint and the header values

import { useState, useEffect } from "react";
import { Navbar, Secondtransition } from "./index";
import axios from "axios";

export default function Dailyform() {
  const [transfared, setTransfared] = useState(false);


  useEffect(() => {
    setTimeout(() => setTransfared(true), 1000);

    axios
      .get(
        `https://myTokenAPI/api/[email protected][email protected]`,
        {
          headers: {
            tenant: "secret value that I can't show",
            "Ocp-Apim-Subscription-Key": "secret value that I can't show",
          },
        }
      )
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.error(err));
  }, []);

  return (
    <div className="daily-form w-full min-h-[100vh] relative">
      <Navbar />
      <div className="page-content w-full flex-col items-center justify-center text-center">
        <h1 className="text-4xl text-[#fff] font-yeseva py-10">
          Daily Sales Upload Page
        </h1>
        <form
          action=""
          className="flex flex-col space-y-10 w-full items-center justify-center"
        >
          <input
            type="text"
            className="w-1/2 py-5 border-b-[1px] border-[#fff] px-3 bg-[rgba(255,255,255,0.1)] placeholder:text-[#fff] text-[#fff]"
            placeholder="Enter Your Name"
          />
        </form>
      </div>
      <Secondtransition transfared={transfared} />
    </div>
  );
}

1- I tried to contact with the IT of the company that made the API, and he said that it’s working with others normally.

2- I tried to use https with my localhost server using mkcert, and nothing changed

3- I tried to upload the app on a real domain, sorry for not sharing it because it contains private information, and agian nothing changed.

4- I tried to use JavaScript fetch, agian the same error.

5- I tried to use Jquery, I wasn’t sure about the correctness of the code, but the same error appeared.

6- i tried to take the code out of the useEffect react hook, and nothing changed, the same error 🙁