Fetch from Chalice API

Question

I have an endpoint to add items to a "MasterList" dynamoDB table

    @app.route('/save_listing', methods=['POST'], content_types=['application/json'], cors=cors_config)
    def post_item():
        try:
            data = app.current_request.json_body
        except Exception as e:
            data = e
        try:
            insert_item({ 
                'pk': data['sku'],
                "account" : data['account']
            })
        except Exception as e:
            return str(e)
        return str(data)

When I POST using postman, It adds to the table, and returns the data string.

Now I am trying to implement the same POST in ReactJS

    createListing(listing) {
        console.log(listing)
        fetch('https://z3sr9ja4zf.execute-api.us-east-1.amazonaws.com/api/save_listing', {
          method: 'post',
          body: JSON.stringify(listing)

        }).then(function(response) {
          return response;
        });
    }

console.log(listing) produces

How can I use the endpoint on ReactJS, it seems like I am not passing the object correctly. Right now nothing is writing to the DB, and I get a Undefined response. Also I have gottne 415 response.

Thank you in advance.

JSON.stringify(listing) produces:

{"sku":"OX-PFWI-BNV0","account":"AO","asin":"","cogl":-5.09,"cogs":0,"status":"","launch_date":"NULL","per_item_on_hand_rate":0,"selling_price":0,"expected_fulfillment_fee_per_unit":0,"rating":0,"picture_count":0,"amz_status":"","fba_fee":0,"item_volume":"NULL","product_size_tier":"","volume_rate":"NULL","country":"USA","manager":"NULL","sub_category":"NULL"}

If I post using postman:

And the Headers:

score 0 · Answer 1 · answered Dec 05 '18 at 03:38

The response code HTTP 415 is indicating that the server doesn't like the format of your payload. Try modifying your code to include the same headers as what you have in your PostMan request:

createListing(listing) {
    console.log(listing)
    fetch('https://z3sr9ja4zf.execute-api.us-east-1.amazonaws.com/api/save_listing', {
      method: 'post',
      headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
     },
      body: JSON.stringify(listing)

    }).then(function(response) {
      return response;
    });
}

NOTE: I didn't include Accept-Encoding in this code snippet as the value in your screenshot isn't valid - see here for more information.

Fetch from Chalice API

1 Answers1