0

所以这真的让我很困惑。我已经在 AWS Lambda 和 aws npx cli test 命令中测试了以下 API，并且它在两者上都有效。当我提交表单时从客户端调用 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.

我已经尝试在我的 serverless.yml 文件上禁用 cors。我尝试使用不同的 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 在 serverless.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 });
  }
}
4

1 回答 1

1

您还需要在响应上设置 CORS。所以在你的success()方法中相应地调整它（你没有顺便显示，所以如果下面的代码不起作用，最好也添加它）：

const response = {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
    },
    body: JSON.stringify(yourCustomObject),
  };
于 2019-04-02T10:43:13.687 回答