I have been trying to solve this issue for days but couldn’t manage to solve it.

Problem:

I have a React app and i am calling a json file from AWS S3 bucket using Axios get request.

export const getOrders = createAsyncThunk('eCommerceApp/orders/getOrders', async () => {

  const response = await axios.get(
    "https://mycidata.s3.us-east-1.amazonaws.com/sample2.json",
    {
      headers: { 'Content-Type': 'application/json'},
    }
  );
  const data = response.data;
  return data;
});

And i am receiving this error message: “Failed to load resource: the server responded with a status of 400 (Bad Request)“

What i tried so far:

1. My json file is located here:
   https://mycidata.s3.us-east-1.amazonaws.com/sample2.json. I made it publicly accessible using AWS CORS configuration console. I turned off “Block all public access” options. So it is fully accessible from everywhere.

2. I changed my json file’s ACL settings to make it accessible from everywhere.

3. I updated CORS configuration making sure that allowed origins, headers and requests are present.

But despite all these changes, i am still getting CORS error that i mentioned above. Any idea what i might be missing?