Call the Create API

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

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

with this

function createNote(note) { return"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.

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

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

return“notes”, “/notes”, {

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

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

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

Oh that’s interesting. Thanks for reporting!

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.

1 Like

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?

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 :frowning:

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

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

1 Like

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

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

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.

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.

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.

Hi @jayair! Thanks for the reply. Yes I think I have those covered. My my files are here if you have time: 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!

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.

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

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. :slight_smile:

1 Like