Блог

Так что это действительно сбивает меня с толку. Я протестировал следующий API в AWS Lambda и с помощью тестовой команды aws npx cli, и она работает с обоими. Проблема возникает, когда api вызывается из клиента при отправке формы. Я получаю следующую ошибку 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.

Я уже пытался ОТКЛЮЧИТЬ cors в моем бессерверном файле.yml. Я пробовал использовать разные роли IAM и пробовал вызывать это по-разному в клиентском коде.

Здесь я вызываю API:

 import { API } from "aws-amplify";

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

Вот где мой API определен в бессерверном файле.yml

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

а вот и сам код api

 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 });
  }
}
  

Вам также необходимо установить CORS для ответа. Поэтому соответствующим образом настройте его в своем success() методе (который, кстати, вы не показали, так что было бы неплохо добавить и его на случай, если приведенный ниже код не сработает):

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