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

sakhmedbayev · 2020-04-02T14:13:48Z

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

The text was updated successfully, but these errors were encountered:

nikhname · 2020-04-02T19:33:01Z

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

sakhmedbayev · 2020-04-03T03:56:16Z

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 · 2020-04-04T21:25:44Z

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 · 2020-04-06T23:00:34Z

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

sakhmedbayev · 2020-04-07T08:32:19Z

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

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

sakhmedbayev · 2020-04-07T08:35:55Z

@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 · 2020-04-07T17:08:42Z

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 · 2020-04-28T10:35:09Z

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

Afanasievov · 2020-05-07T19:27:02Z

Hi! Have the same behavior

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

elchinillo · 2020-05-23T17:21:43Z

Any update on this issue? Same behavior over here:

Amplify CLI: 4.20.0
aws-amplify@3.0.12

lukeramsden · 2020-05-26T13:54:06Z

Also getting this issue, CLI version 4.20.0, @aws-amplify/storage@3.1.9, aws-amplify@3.0.10, aws-sdk@2.675.0. 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 · 2020-05-26T16:49:00Z

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 · 2020-05-28T21:53:12Z

Same here.

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

elchinillo · 2020-05-30T18:41:51Z

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

Amplifiyer · 2020-06-03T16:56:54Z

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

BernhardSmuts · 2020-06-05T10:45:51Z

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 · 2020-06-05T10:50:08Z

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 · 2020-06-05T10:56:13Z

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 · 2020-06-05T12:05:48Z

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 · 2020-06-06T18:58:52Z

@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 aws-amplify@3.0.11

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

npm list | grep amplify
├─┬ aws-amplify@3.0.11
│ ├─┬ @aws-amplify/analytics@3.1.10
│ │ ├── @aws-amplify/cache@3.1.10 deduped
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ ├─┬ @aws-amplify/api@3.1.10
│ │ ├─┬ @aws-amplify/api-graphql@1.0.12
│ │ │ ├── @aws-amplify/api-rest@1.0.12 deduped
│ │ │ ├── @aws-amplify/auth@3.2.7 deduped
│ │ │ ├── @aws-amplify/cache@3.1.10 deduped
│ │ │ ├── @aws-amplify/core@3.2.7 deduped
│ │ │ ├── UNMET PEER DEPENDENCY @aws-amplify/pubsub@3.0.11 deduped
│ │ ├─┬ @aws-amplify/api-rest@1.0.12
│ │ │ ├── @aws-amplify/core@3.2.7 deduped
│ │ └── UNMET PEER DEPENDENCY @aws-amplify/pubsub@^2.1.1
│ ├─┬ @aws-amplify/auth@3.2.7
│ │ ├── @aws-amplify/cache@3.1.10 deduped
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ ├─┬ @aws-amplify/cache@3.1.10
│ │ └── @aws-amplify/core@3.2.7 deduped
│ ├─┬ @aws-amplify/core@3.2.7
│ ├─┬ @aws-amplify/datastore@2.1.0
│ │ ├── @aws-amplify/api@3.1.10 deduped
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ │ ├── UNMET PEER DEPENDENCY @aws-amplify/pubsub@3.0.11 deduped
│ ├─┬ @aws-amplify/interactions@3.1.10
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ ├─┬ @aws-amplify/predictions@3.1.10
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ │ ├── @aws-amplify/storage@3.2.0 deduped
│ ├─┬ UNMET PEER DEPENDENCY @aws-amplify/pubsub@3.0.11
│ │ ├── @aws-amplify/auth@3.2.7 deduped
│ │ ├── @aws-amplify/cache@3.1.10 deduped
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ ├─┬ @aws-amplify/storage@3.2.0
│ │ ├── @aws-amplify/core@3.2.7 deduped
│ ├── @aws-amplify/ui@2.0.2
│ ├─┬ @aws-amplify/xr@2.1.10
│ │ └── @aws-amplify/core@3.2.7 deduped
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api@3.1.10
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api@3.1.10
npm ERR! peer dep missing: @react-native-community/netinfo@^5.5.0, required by @aws-amplify/datastore@2.1.0
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api-graphql@1.0.12
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api@3.1.10
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api@3.1.10
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api@3.1.10
npm ERR! peer dep missing: @aws-amplify/pubsub@^2.1.1, required by @aws-amplify/api@3.1.10

Amplifiyer · 2020-06-09T18:23:09Z

@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 · 2020-06-10T01:22:59Z

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

Amplifiyer · 2020-06-10T01:46:03Z

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 · 2020-07-09T22:29:20Z

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

stale · 2020-07-18T00:00:19Z

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

github-actions · 2021-07-18T00:08:53Z

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

renebrandel assigned akshbhu Apr 3, 2020

Amplifiyer transferred this issue from aws-amplify/amplify-cli Apr 7, 2020

Amplifiyer mentioned this issue Apr 7, 2020

[Prod] Configuration option "tls" is not honored in http handlers aws/aws-sdk-js-v3#1084

Closed

Amplifiyer added React Native React Native related issue Storage Related to Storage components/category version-3 labels Apr 7, 2020

Amplifiyer mentioned this issue Apr 13, 2020

couple of issues when using aws-amplify@3.0.7 and aws-amplify-react@4.1.6 #5378

Closed

Amplifiyer mentioned this issue May 11, 2020

Storage.put, Storage.get with protected images give 403 error out of the box on localhost #5729

Closed

Amplifiyer mentioned this issue May 21, 2020

Upgrade aws-sdk to gamma version #5854

Merged

ashika01 assigned Amplifiyer May 31, 2020

ashika01 added the pending-close-response-required label Jun 4, 2020

stale bot removed the pending-close-response-required label Jun 5, 2020

sammartinez added the pending-close-response-required label Jul 9, 2020

stale bot closed this as completed Jul 18, 2020

github-actions bot locked as resolved and limited conversation to collaborators Jul 18, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

sakhmedbayev commented Apr 2, 2020

nikhname commented Apr 2, 2020 •

edited

Loading

sakhmedbayev commented Apr 3, 2020

akshbhu commented Apr 4, 2020

kaustavghosh06 commented Apr 6, 2020 •

edited

Loading

sakhmedbayev commented Apr 7, 2020

sakhmedbayev commented Apr 7, 2020 •

edited

Loading

Amplifiyer commented Apr 7, 2020

sakhmedbayev commented Apr 28, 2020

Afanasievov commented May 7, 2020

elchinillo commented May 23, 2020

lukeramsden commented May 26, 2020 •

edited

Loading

Amplifiyer commented May 26, 2020

BernhardSmuts commented May 28, 2020

elchinillo commented May 30, 2020

Amplifiyer commented Jun 3, 2020

BernhardSmuts commented Jun 5, 2020 •

edited

Loading

lukeramsden commented Jun 5, 2020

BernhardSmuts commented Jun 5, 2020

lukeramsden commented Jun 5, 2020 •

edited

Loading

elchinillo commented Jun 6, 2020

Amplifiyer commented Jun 9, 2020

elchinillo commented Jun 10, 2020

Amplifiyer commented Jun 10, 2020

sammartinez commented Jul 9, 2020

stale bot commented Jul 18, 2020

github-actions bot commented Jul 18, 2021

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

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

Comments

sakhmedbayev commented Apr 2, 2020

nikhname commented Apr 2, 2020 • edited Loading

sakhmedbayev commented Apr 3, 2020

akshbhu commented Apr 4, 2020

kaustavghosh06 commented Apr 6, 2020 • edited Loading

sakhmedbayev commented Apr 7, 2020

sakhmedbayev commented Apr 7, 2020 • edited Loading

Amplifiyer commented Apr 7, 2020

sakhmedbayev commented Apr 28, 2020

Afanasievov commented May 7, 2020

elchinillo commented May 23, 2020

lukeramsden commented May 26, 2020 • edited Loading

Amplifiyer commented May 26, 2020

BernhardSmuts commented May 28, 2020

elchinillo commented May 30, 2020

Amplifiyer commented Jun 3, 2020

BernhardSmuts commented Jun 5, 2020 • edited Loading

lukeramsden commented Jun 5, 2020

BernhardSmuts commented Jun 5, 2020

lukeramsden commented Jun 5, 2020 • edited Loading

elchinillo commented Jun 6, 2020

Amplifiyer commented Jun 9, 2020

elchinillo commented Jun 10, 2020

Amplifiyer commented Jun 10, 2020

sammartinez commented Jul 9, 2020

stale bot commented Jul 18, 2020

github-actions bot commented Jul 18, 2021

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

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

nikhname commented Apr 2, 2020 •

edited

Loading

kaustavghosh06 commented Apr 6, 2020 •

edited

Loading

sakhmedbayev commented Apr 7, 2020 •

edited

Loading

lukeramsden commented May 26, 2020 •

edited

Loading

BernhardSmuts commented Jun 5, 2020 •

edited

Loading

lukeramsden commented Jun 5, 2020 •

edited

Loading