Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storage API doesn't throw error even if the CORS error

See original GitHub issue

Before opening, please confirm:

I have searched for duplicate or closed issues and discussions.
I have read the guide for submitting bug reports.
I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Not applicable

Amplify APIs

Storage

Amplify Categories

storage

Environment information

Chrome

Describe the bug

We found a point for improvement in Storage API. Storage API can’t catch error even if CORS error occurs, the Promise is resolved. I think it is better Storage API throw error.

StorageAPI-sample-code

async function put_s3() {
  // Specify a bucket that does not exist
  await Storage.put("test.txt", "Hello", { bucket: "XXXXX" }).then(
    (result) => {
      console.log("result!!!!");
      console.log(result)
    }
  ).catch(
    (error) => {
      console.log("error!!!!");
      console.log(error)
    }
  )
}

Browsers console log(Chrome)

Access to XMLHttpRequest at 'https://XXXXX.s3.ap-northeast-1.amazonaws.com/public/test.txt?x-id=PutObject' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index.js:1 [ERROR] 39:07.605 axios-http-handler - Network Error
...
App.js:48 result!!!!
App.js:49 {key: 'test.txt'}

I think this behavior is a little strange. I checked the behavior of axios, they throwed error.

axios-sample-code

  axios.post('/items')
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log("error!!!");
      console.log(error);
    });

Browsers console log

localhost/:1 Access to XMLHttpRequest at 'https://XXXXX/items' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
App.js:40 error!!!
App.js:41 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:99)
xhr.js:187 POST https://XXXXX/items net::ERR_FAILED 200

I checked Similar this issues https://github.com/aws-amplify/amplify-js/issues/3419

But this issues seems to be fixed.

Thanks