CODEWITHSUNDEEP
reactjsamazon-web-services
TiernO
TiernO

Reputation: 447

Am I calling my API correctly? Getting CORS error

So this is really baffling me. I have tested the following API in AWS Lambda and with the aws npx cli test command and it is working on both. The issue arises when the api is called from the client when i submit a form. I get the following error Access to XMLHttpRequest at 'https://sdigg5u4xb.execute-api.eu-west-1.amazonaws.com/prod/sites' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have already tried DISABLING cors on my serverless.yml file. I have tried using different IAM roles and I have tried calling it differently in the client code.

Here is where I am calling the API:

import { API } from "aws-amplify";

export default (async function submitSite(values) {
  console.log(JSON.stringify(values));
  return API.post("sites", "sites", {
    body: values
  }) 
});

Here is where my API is defined in the serverless.yml file

createSite:
    handler: CreateSite.main
    events:
      - http:
          path: sites
          method: post
          cors: true
          authorizer: aws_iam

and here is the api code itself

import uuid from "uuid";
import * as dynamoDbLib from "./libs/dynamodb-lib";
import { success, failure } from "./libs/response-lib";

export async function main(event, context) {
  const data = JSON.parse(event.body);
  const params = {
    TableName: "sites",
    Item: {
      userId: event.requestContext.identity.cognitoIdentityId,
      siteId: uuid.v1(),
      siteName: data.siteName,
      siteAddress: data.siteAddress,
      siteCounty: data.siteCounty,
      siteEmail: data.siteEmail,
      siteNumber: data.siteNumber,
      openTimes: data.openTimes,
      siteCat: data.siteCat,
      siteFees: data.siteFees,
      access: data.access,
      w3w: data.w3w,
      gps: data.gps,
      detailsHeader: data.detailsTxtHeader,
      detailsContent: data.detailsTxtContent,
      tourName: data.tourName,
      tourWaypoints: data.waypoints,
      tourDuration: data.duration,
      tourHeader: data.tourTxtHeader,
      tourContent: data.tourTxtContent,
      poiName: data.poiName,
      poiType: data.poiType,
      poiDesc: data.poiDesc,
      poiDuration: data.poiDuration,
      poiRanking: data.poiRanking,
      poiTime: data.poiTime,
      poiAccess: data.poiAccess,
      poiHeader: data.poiTxtHeader,
      poiContent: data.poiTxtContent
    }
  };

  try {
    await dynamoDbLib.call("put", params);
    return success(params.Item);
  } catch (e) {
    return failure({ status: false });
  }
}

Upvotes: 0

Views: 59

Answers (1)

Thales Minussi
Thales Minussi

Reputation: 7215

You need to set CORS also on the response. So adjust it accordingly in your success() method (which you have not shown by the way, so it'd be nice to add it as well in case the code below does not work):

const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify(yourCustomObject),
  };

Upvotes: 1

Related Questions