Amplify-js: While in the mock mode, I cannot upload a file. The `PUT` request is sent to the `https` endpoint instead of the `http`

[sakhmedbayev]

Describe the bug
While in the mock mode, I cannot upload a file. The PUT request is sent to the https endpoint instead of the http

Amplify CLI Version
4.13.4

To Reproduce

• amplify add auth
• amplify add storage
• amplify mock
• observe message in terminal Mock Storage endpoint is running at http://localhost:20005
• try to upload a file
• go to Chrome's console
• observe error message PUT https://localhost:20005/my-bucket-name/public/my-file.png?x-id=PutObject net::ERR_SSL_PROTOCOL_ERROR

Expected behavior
to be able to upload a file and see it in amplify/mock-data/S3/my-bucket directory

Desktop (please complete the following information):

• OS: macOS
• Node Version: v10.13.0

[nikhname]

@sakhmedbayev could you provide what is in your aws-exports.js file?

[sakhmedbayev]

Thanks for reply @nikhname. Here it is

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_cognito_identity_pool_id": "us-east-1:64otherpartofstring",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1-otherpartofstring",
    "aws_user_pools_web_client_id": "otherpartofstring",
    "oauth": {
        "domain": "my-domain-prefix-dev.auth.us-east-1.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "http://localhost:8000/login/",
        "redirectSignOut": "http://localhost:8000/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS",
    "aws_appsync_graphqlEndpoint": "http://192.168.1.223:20002/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": "da2-otherpartofstring",
    "aws_appsync_dangerously_connect_to_http_endpoint_for_testing": true,
    "aws_user_files_s3_bucket": "my-bucket-name-dev",
    "aws_user_files_s3_bucket_region": "us-east-1",
    "aws_user_files_s3_dangerously_connect_to_http_endpoint_for_testing": true
};


export default awsmobile;

[akshbhu]

Hi @sakhmedbayev

It seems the flag to http is set. Can you also tell how are you making upload call to mock S3 in your app so that I can reproduce the error?

[kaustavghosh06]

@sakhmedbayev What's the aws-amplify lib version you're using on your client?

[sakhmedbayev]

Thanks for the reply @kaustavghosh06. I am using the following versions:

"aws-amplify": "^3.0.4",
"aws-amplify-react": "^4.1.3",

[sakhmedbayev]

@akshbhu, here is how I am doing it:

import { Storage } from "aws-amplify"
import React, { useState } from "react"

export default function App() {
  const [file, updateFile] = useState(null)

  function handleChange(event) {
    const {
      target: { value, files },
    } = event
    const [image] = files || []
    updateFile(image || value)
  }

  async function createUser() {
    if (file) {
      const { name: fileName, type: mimeType } = file
      const key = `${fileName}`

      try {
        await Storage.put(key, file, {
          contentType: mimeType,
        })
        console.log("successfully stored user data!")
      } catch (err) {
        console.log("error: ", err)
      }
    }
  }

  return (
    <div style={styles.container}>
      <input
        label="File to upload"
        type="file"
        onChange={handleChange}
        style={{ margin: "10px 0px" }}
      />

      <button style={styles.button} onClick={createUser}>
        Save Image
      </button>
    </div>
  )
}

const styles = {
  container: {
    width: 300,
    margin: "0 auto",
  },
  button: {
    width: 200,
    backgroundColor: "#ddd",
    cursor: "pointer",
    height: 30,
    margin: "0px 0px 8px",
  },
}

[Amplifiyer]

Transferring this issue to amplify-js. I believe the issue is with new major version release where underlying aws-sdk-js-v3 is not honoring the overridden end point protocol. I have an issue opened with them.

[sakhmedbayev]

Is there any news on this issue? Please let us know.

[Afanasievov]

Hi! Have the same behavior

Amplify CLI version: 4.18.1
aws-amplify: 3.0.10
aws-amplify-react: 4.1.19

[elchinillo]

Any update on this issue? Same behavior over here:

Amplify CLI: 4.20.0
[email protected]

[lukeramsden]

Also getting this issue, CLI version 4.20.0, @aws-amplify/[email protected], [email protected], [email protected]. Maybe the mock command should self-sign some certs and then the whole environment could run over https://? Would bring it closer to a production environment.

[Amplifiyer]

Hi please try with the latest version of amplify (try removing the node_modules and lock files if required.) There is currently another bug with Storage.Put which we are working on priority right now #5876

[BernhardSmuts]

Same here.

Some services need Https, especially with federated auths.
Yet mock only serves over HTTP.

[elchinillo]

Just upgraded to @aws-amplify/cli 4.21.0 and is still an issue.

[Amplifiyer]

@elchinillo and @BernhardSmuts what's the amplify-js version are you using? Are you still facing issues with using Storage in mock mode?

[BernhardSmuts]

Hi, @Amplifiyer.

using Amplify version: 4.21.0

I have recreated my test code for this and it is as follows:

My schema.graphql file has the following:

type imageCard @model {
  is: ID!
  name: String!
  image: S3Object!
}

type S3Object {
  bucket: String!
  region: String!
  key: String!
}

Using ReactJS, The select image and upload image functions are as follows:

const reader = new FileReader();

  const handleSelectImage = (evt) => {
    console.log("Handling Image Select");
    const file = evt.target.files[0];

    if (file) {
      reader.readAsDataURL(file);
    }

    reader.addEventListener(
      "load",
      async () => {
        console.log(reader);
      },
      false
    );
  };

  const handleUploadImage = () => {
    console.log("Uploading image");

    Storage.put("TestingImage.jpg", reader, {
      level: "public",
    })
      .then((result) => console.log(result))
      .catch((err) => console.log(err));
  };

This works fine when using with the actual AWS services... and after upload I get returned the key which in this case is TestingImage.jpg

I am hosting the ReactJS app using ($env:HTTPS="true") -and (npm start)

However, the problem comes in when I try and mock the storage. I get the following:

In the console:

In the network tab:

In the network request:

AWS mock server:

and the aws_exports file when running in mock is as follows:

To the best of my understanding, the S3 request is being done over HTTPS as can be seen in the network tab, but the AWS server is hosting the mock endpoint over HTTP. I have also allowed the Insecure setting in Google Chrome for the AWS endpoints.

[lukeramsden]

I actually resorted to changing the AppSync endpoint port to 20005, on which I was running an mitmproxy command with a self-signed and system-wide trusted root certificate - and I modified my /etc/hosts file to redirect my env:dev S3 URL to another instance of mitmproxy, because the port for S3 is hardcoded in the JS library, which is very annoying.

[BernhardSmuts]

I actually resorted to changing the AppSync endpoint port to 20005, on which I was running an mitmproxy command with a self-signed and system-wide trusted root certificate - and I modified my /etc/hosts file to redirect my env:dev S3 URL to another instance of mitmproxy, because the port for S3 is hardcoded in the JS library, which is very annoying.

Cool, thanks will try something like this. The whole point of mock it to not have to go through all those configs. It would be nice if they could let you define the SSL env to run mock on.

[lukeramsden]

I agree completely, there was a relevant conversation here but it still feels like a design oversight.

These are the commands I'm using with mitmproxy

# 109 is my local IP obviously
mitmdump -p 20006 --mode reverse:http://192.168.1.109:20002/
mitmdump -p 443 --mode reverse:http://192.168.1.109:20005/

And then you add an entry in /etc/hosts:

$ cat /etc/hosts
# other stuff
# ...
127.0.0.1 apps3bucketname-dev.s3.eu-west-2.amazonaws.com

And then remove the "dangerously_connect_etc_etc" entries from your aws_exports.

[elchinillo]

@elchinillo and @BernhardSmuts what's the amplify-js version are you using? Are you still facing issues with using Storage in mock mode?

I'm using [email protected]

Here is what I get when I run npm list | grep amplify, I'm hopping this gets you more details.

npm list | grep amplify
├─┬ [email protected]
│ ├─┬ @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── @aws-amplify/[email protected] deduped
│ ├─┬ @aws-amplify/[email protected]
│ │ ├─┬ @aws-amplify/[email protected]
│ │ │ ├── @aws-amplify/[email protected] deduped
│ │ │ ├── @aws-amplify/[email protected] deduped
│ │ │ ├── @aws-amplify/[email protected] deduped
│ │ │ ├── @aws-amplify/[email protected] deduped
│ │ │ ├── UNMET PEER DEPENDENCY @aws-amplify/[email protected] deduped
│ │ ├─┬ @aws-amplify/[email protected]
│ │ │ ├── @aws-amplify/[email protected] deduped
│ │ └── UNMET PEER DEPENDENCY @aws-amplify/pubsub@^2.1.1
│ ├─┬ @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── @aws-amplify/[email protected] deduped
│ ├─┬ @aws-amplify/[email protected]
│ │ └── @aws-amplify/[email protected] deduped
│ ├─┬ @aws-amplify/[email protected]
│ ├─┬ @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── UNMET PEER DEPENDENCY @aws-amplify/[email protected] deduped
│ ├─┬ @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ ├─┬ @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── @aws-amplify/[email protected] deduped
│ ├─┬ UNMET PEER DEPENDENCY @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── @aws-amplify/[email protected] deduped
│ │ ├── @aws-amplify/[email protected] deduped
│ ├─┬ @aws-amplify/[email protected]
│ │ ├── @aws-amplify/[email protected] deduped
│ ├── @aws-amplify/[email protected]
│ ├─┬ @aws-amplify/[email protected]
│ │ └── @aws-amplify/[email protected] deduped
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @react-native-community/netinfo@^5.5.0, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/[email protected]

[Amplifiyer]

@elchinillo can you try with the latest aws-amplify version and not the amplify-cli? Regarding the https end point, it is outside the scope of this issue. Please open a new feature request for that.

[elchinillo]

I'll try again over the weekend. Regarding the https endpoint, isn't that why this issue started?

[Amplifiyer]

I'll try again over the weekend. Regarding the https endpoint, isn't that why this issue started?

No, the issue was started because amplify-js library was incorrectly sending requests to https endpoint instead of the server running on http end point.

[sammartinez]

@elchinillo were you able to test the latest? Please let us know.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.