Call the Create API

#82

Should cors headers be set anywhere in the React app?

#83

No there isn’t any on the React side. But this 403 error means that, the request isn’t getting to the Lambda functions. It is failing at the API Gateway level. These are a bit trickier to debug.

Here is how to see what the actual error is. I’m going to add this to the guide soon. But you can use it to debug it right away.

Add the following block at the bottom of your serverless.yml and re-deploy it using serverless deploy.

resources:
  Resources:
    GatewayResponseDefault4XX:
      Type: 'AWS::ApiGateway::GatewayResponse'
      Properties:
        ResponseParameters:
           gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
           gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
        ResponseType: DEFAULT_4XX
        RestApiId:
          Ref: 'ApiGatewayRestApi'

The reason we need to do this because when API Gateway fails, it doesn’t get to our Lambda function. The Lambda function sets the CORS headers. So in this case you get failures that also look like CORS errors. When in reality they are just regular errors without the CORS headers. The above block adds a resource to API Gateway telling it to set the CORS headers for any 4XX failures.

#84

Thanks @jayair I added it but then I got the same CORS message for 502 instead so did the same in GatewayResponse for default 5XX. That solved the CORS message showing up but I’m still getting 502 and there’s nothing showing up in the CloudWatch logs…

I can call the POST method and create a new note if I do serverless invoke --function create --path mocks/create-note.json in the terminal. But I’m getting 502 when I try to do it in React. Any idea what’s going on?

#85

Hmm 500 errors are a part of your code. So you should be able to console.log what is being returned.

#86

@jayair

What should I be expecting to be returned from this:

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

The table does get updated, but I am not receiving the result of the success() function in my handler.
For my project, if I do these console.logs():

   createContact(contact) {
        const result = API.post('contacts', '/contacts', {
            body: contact
        }).then((data) => console.log('Then', data))
        console.log('Create: ', result)
        return result
    }

the promise stored to result:

[[PromiseStatus]]:"resolved"
[[PromiseValue]]:undefined

data:
Then

I would expect that data would at least be undefined here.
What I would like, is to retrieve the newly created item. Is that possible here?

#87

These are promises, so you would need an await if you want the result after it resolves.

    const result = await API.post('contacts', '/contacts',...
1 Like
#88

Thanks. I am a little new to promises, but I think I am figuring out how they are working.

1 Like
#89

We are new to AWS serverless stack and tried our hands on to build the notes app using the documentation. We are at: https://serverless-stack.com/chapters/call-the-create-api.html and stuck with getting response
{message: “Missing Authentication Token”}
with 403 status code
on submitting notes at http://localhost:3000/notes/new

We have followed each and every step carefully.
Please help

#90

Have you tested the API with the CLI?