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 🙁