I hope you had a good Christmas day.
I have been looking to solve this for 6 hours straight, but I could not.
I am getting the error:
“Access to XMLHttpRequest at ‘https://joonkim025n.korconnect.io/Rapid/cards/Rolling%20Fireball’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.”
This is the network tab:
Request Method: OPTIONS
Status Code: 403
Remote Address: xx.122.14.:443
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: date,content-type,content-length,x-amzn-requestid,x-amzn-errortype,x-amz-apigw-id
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: date, content-type, content-length, x-amzn-requestid, x-amzn-errortype, x-amz-apigw-id
content-length: 23
content-type: application/json
Content-Type: application/json; charset=utf-8
date: Sun, 26 Dec 2021 09:45:17 GMT
x-amz-apigw-id: K83zFHKzIAMFmqA=
x-amzn-errortype: ForbiddenException
x-amzn-requestid: 0c0e5e80-98bb-41bd-b0d2-6fdf145f4e7d
X-Content-Type-Options: nosniff
It was working yesterday, and I have not changed any code. However, it seems like the CORS policy is suddenly blocking fetching of an API…
I have been looking for answers for 5 hours on this site and many more. However, many answers did not work, and most of them had to do with backend..
My app does not have a backend. I fetch everything in useEffect.
KORconnect is a proxy server I use to hide my api key.
Please suggest me a possible solution..
This is the frontend code where I call fetch. It was working yesterday without commented out code.
const Container = (): ReactElement => {
const dispatch = useDispatch();
useEffect(() => {
const options: object = {
method: 'GET',
url: 'https://joonkim025n.korconnect.io/Rapid/cards',
params: {collectible: '1'},
// mode: 'no-cors',
headers : { "x-api-key": "asdasdasdasdadsdayLOr0",
// 'Access-Control-Allow-Origin': "*",
// 'Access-Control-Allow-Methods': 'GET',
// 'Access-Control-Allow-Headers': "Origin, X-Requested-With, Content-Type, Accept"
}
}
// function to fetch all collectible cards from hearthstone api
const fetchAllCards = async (): Promise<any> => {
try {
const response = await axios.request(options);
dispatch({type: 'SET_ALL_CARD', payload: response.data})
} catch(e) {
console.log(e)
}
}
fetchAllCards();
}, []);
return ( // omitted...
Please take a look, thanks