Call the Create API

AntonioUlatina · May 19, 2020, 6:50am

All of the notes section have an error related to a double / call to API. I replaced this

function createNote(note) { return API.post("notes", "/notes", { body: note, }); }

with this

function createNote(note) { return API.post("notes", "notes", { body: note, }); }

for everywhere there was a ‘/notes’ which wasn’t in the Routes.js

I honestly don’t know if this was the correct approach but it worked and fixed all of my headaches.

jayair · May 30, 2020, 7:15pm

I think you might have set something else wrong along the way. Compare it to the GitHub sample repo:

github.com

AnomalyInnovations/serverless-stack-demo-client/blob/master/src/containers/NewNote.js#L51



    await createNote({ content, attachment });
    history.push("/");
  } catch (e) {
    onError(e);
    setIsLoading(false);
  }
}

function createNote(note) {
  return API.post("notes", "/notes", {
    body: note
  });
}

return (
  <div className="NewNote">
    <form onSubmit={handleSubmit}>
      <FormGroup controlId="content">
        <FormControl
          value={content}

AntonioUlatina · May 31, 2020, 1:40am

I checked and all the config is exactly the same as in the example code, but this line 51 as you pasted it

return API.post(“notes”, “/notes”, {

was giving me an error, so I removed the slash and the error was gone

jayair · May 31, 2020, 8:30pm

Weird. What about this line in your config. Make sure it doesn’t have a trailing slash.

github.com

AnomalyInnovations/serverless-stack-demo-client/blob/master/src/config.js#L9


const dev = {
  STRIPE_KEY: "pk_test_v1amvR35uoCNduJfkqGB8RLD",
  s3: {
    REGION: "us-east-1",
    BUCKET: "notes-app-2-api-dev-attachmentsbucket-qvdowkch2uj1"
  },
  apiGateway: {
    REGION: "us-east-1",
    URL: "https://api.serverless-stack.seed-demo.club/dev"
  },
  cognito: {
    REGION: "us-east-1",
    USER_POOL_ID: "us-east-1_f8l0OHPtp",
    APP_CLIENT_ID: "5r5o292r1n7s2vgje5u5c7vpq0",
    IDENTITY_POOL_ID: "us-east-1:b718098b-fe72-410b-b4c6-0750f9135672"
  }
};

const prod = {

xioneks · June 12, 2020, 6:54am

If you are having problems with the page redirecting and you’re using Firefox Quantum, use Chrome or any Chromium-based browser. Firefox have this thing where it doesn’t allow CORS to run locally because it’s on HTTP instead of HTTPS

It’s like a safety thingy

jayair · June 13, 2020, 10:32pm

Oh that’s interesting. Thanks for reporting!

twoandahalf · June 16, 2020, 6:36am

Hello Team , First of all Thank you so much for creating and maintaining this project.
This is an amazing work !

I have been working on adding more features to the that implementation and have a question about amplify Storage data upload.

I noticed that you guys use 5MBs of max file size and understand its probably more or less related to S3 max chunk size upload which is also 5MB.

However if you needed to upload files that are larger that 5MBs how would you go about this. Because after removing the limitation in React i still get an error from amazon :

[50:08.104 AWSS3Provider ManagedUpload - error happened while finishing the upload. Cancelling the multipart upload Error: Request failed with status code 400]

it would be great if someone has worked on this and can help… anyway i have a meeting with amazon support this week and will post here any updates later on.

jayair · July 2, 2020, 8:43pm

Hmmm that’s odd because the 5MB limit is very arbitrary. It should word for larger files as well. Did you figure out whats going on?

twoandahalf · July 11, 2020, 6:19am

hey Jay, yes. I ended up talking to aws support. Amplify does not support file upload larger than 5gb(this is called multipart upload). I had to use lambda. This is a really bad limitation of amplify.

i apologize for the type . its 5GB not 5MB

jayair · July 12, 2020, 1:47am

Ah okay that makes sense. It’s a large enough limit for other folks. What are you planning on using these uploads for?

twoandahalf · July 12, 2020, 7:32am

well in my case , i guess unlucky users upload audio conversations for analysis and they are sometimes larger. But its not so bad because i found a workaround with lambda.

josefnorlin · October 19, 2020, 7:08am

I get this issue as well. Did you find any answer to your question?

fishtaco · November 3, 2020, 10:14pm

I am also getting the 403 here. Where are you getting this response output? Thanks

jeffcordova · November 11, 2020, 9:19pm

hi everyone. i’m getting a CORS issue when I try to add a note (no attachment yet). The weird thing is, the data is going in the database. But I get Network Error returned to me. Please see attached screenshot

I didn’t encounter any of this in the previous chapter though. Any leads please? Thank you.

jeffcordova · November 13, 2020, 7:24am

Hi, I tried redoing everything from the start but I got stumped by this same issue - “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. During my tests, my backend works well, but when I use it with the create frontend, I get this error. I know it’s calling the Lambda function because the data is being displayed in Dynamo DB. Any leads please? Thank you.

jayair · November 13, 2020, 6:52pm

This sounds like the CORS headers are not being returned in your Lambda functions?

We’ve moved the steps around but make sure that you have this in your Lambda functions.

jeffcordova · November 14, 2020, 8:51am

Hi @jayair! Thanks for the reply. Yes I think I have those covered. My my files are here if you have time: https://github.com/jeffcordova/serverlesss-stack-api. Do you think it’s a backend issue even if the test in the previous chapters were successful? Or how do I debug this? Thank you!

jeffcordova · November 16, 2020, 4:12am

Hi @jayair, I tried logging my response in the Lambda function. It seems it’s returning the correct headers.

2020-11-16T03:59:07.661Z f69bcc1f-2f21-4793-a37c-f09011fcd66d INFO { statusCode: 200, body: '{"userId":"ap-southeast-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX","noteId":"XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX","content":"test today","createdAt":1605499147577}', headers: { 'Access-Content-Allow-Origin': '*', 'Access-Content-Allow-Credentials': true }}

So I’m guessing the issue is with my API Gateway? If you have suggestions on how to knock this one down, feel free to suggest. Thank you.

jayair · November 22, 2020, 7:17pm

Yeah API Gateway needs to handle the OPTIONS request as well. For that you need this:

github.com

AnomalyInnovations/serverless-stack-demo-api/blob/master/services/notes/serverless.yml#L59


# Defines an HTTP API endpoint that calls the main function in create.js
# - path: url path is /notes
# - method: POST request
# - authorizer: authenticate using the AWS IAM role
create:
  handler: create.main
  events:
    - http:
        path: notes
        method: post
        cors: true
        authorizer: aws_iam
get:
  # Defines an HTTP API endpoint that calls the main function in get.js
  # - path: url path is /notes/{id}
  # - method: GET request
  handler: get.main
  events:
    - http:
        path: notes/{id}

fentonhaslam · December 30, 2020, 3:23pm

Hi Jeff, don’t know whether you solved this issue. I looked at the create function and found that my function wasn’t using the handler-lib which we edit in the CORS Handle CORS in Serverless APIs | Serverless Stack.
I redeployed the backend with the create function using this handler and it returned a 200.