SDK for JavaScript v3 - "Error: TypeError: NetworkError when attempting to fetch resource"

0

I followed this tutorial to get started using the AWS SDK for JavaScript (version 3) within React Native apps, in order to, say, create and delete buckets stored in Amazon S3. I completed all the steps in the tutorial, but ran into an issue on Step 6: running the example React Native app. The app does run in my browser, fortunately. The problem is, the app keeps giving me the error message in the question title, whenever I type a bucket name into the text input field and subsequently press the button that calls this asynchronous JavaScript function for creating buckets:

const createBucket = async () => {
    setSuccessMsg('');
    setErrorMsg('');
  
    try {
        await client.send(new CreateBucketCommand({ Bucket: bucketName }));
        setSuccessMsg(`Bucket '${bucketName}' created.`);
    } catch (e) {
          setErrorMsg(e);
    }
};

What gives? I successfully created a Cognito Identity pool and attached the AmazonS3FullAccess policy to the unauthenticated identities IAM role. And I am positive that I provided the correct credentials—region and identity pool ID—within the React Native code.

If it matters, I used Expo, not the React Native CLI, to create and run the app.

profile picture
Ben
asked 4 months ago179 views
1 Answer
0

Hello Ben,

It's possible that you have entered a bucket name that violated S3's bucket naming rules [1].

Additionally, "TypeError: Network error when attempting to fetch resource" usually indicates CORS error [2]. This might happens if you're sending your create bucket request to a region other than us-east-1, since your application will have to handle 307 Temporary Redirect [3], thus triggering a CORS error. The sample code from the tutorial allows you to change the configured region by changing the line (line 18) const REGION = "REGION" to const REGION = "us-east-1", which might resolve the CORS error.

Best,

1: S3 bucket naming rules

2: CORS - Mozilla documentation

3: S3 createbucket command

Triet_V
answered 4 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions