Search code examples
jsonreactjsxmlhttprequestaxios

Why axios GET error when downloading json file from remote AWS S3 server

In a React app I'm trying to download a .json file from AWS S3 with following code:

componentDidMount() {

    axios.get(`https://amplify-NotRealUrl-dev-333333-deployment.s3.us-east-2.amazonaws.com/rulesSummaryData2.json`)
      .then(response => {
        console.log("SUCCESS", response);
      }, error => {
        console.log("ERROR", error);
      });
}

In browser Console window, I see this error:

ERROR Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:83)

JSON file is wide-open to the public, no permissions, and I am able to put url in browser and download with no authentication. Also, I can successfully perform GET in Postman. Also, I plugged in an open api GET url, not .json, but it did return successful. Seems to be problem with .json. However I've seen many links showing similar functionality with .json. I'm missing something!

ADDITIONAL INFO (Update): This error occurs no matter the URL I use. For example, if I use axios.get(https://ThisIsNotAValidURLThisIsNotAValidURLThisIsNotAValidURLThisIsNotAValidUR.json)

I still get the exact same error. In addition, I used another base React app, to make sure this projects wasn't the cause, same outcome.

Solution

  • Not clearly following you. If you are saying that you can access https://bucket-name.s3.us-east-2.amazonaws.com/rulesSummaryData2.json in postman, it looks like a cors issue to me.

    Cors for S3 Bucket

    if you haven't done this, configure the below Cors policy in S3 bucket. 

    <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

    Reference:

    How to add Cors configuration to S3 bucket - https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html