0

由于 CORS 对 SO 的支持，我几乎不好意思问这个问题，但我无法解决：

Access to XMLHttpRequest at 'https://a93xxxxx.execute-api.eu-west-1.amazonaws.com/dev[object%20Object]' from origin 'https://www.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我什至用 Amplify 发布了我的 React 项目，并尝试从真实域名中删除任何与开发环境有关的东西（运行 npm 版本 6.14.8 的 Cloud 9）

我还使用 --disable-web-security 标志对运行 Chrome 进行了测试。

我的 Lambda 函数包含以下内容（开箱即用的存根）

exports.handler = async (event) => {
// TODO implement
const response = {
    statusCode: 200,
//  Uncomment below to enable CORS requests
  headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers" : "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With",
      "Access-Control-Allow-Methods" : "OPTIONS,POST,GET,PUT"
    }

  , 
    body: JSON.stringify("Hello from Lambda!")
};
return response;
};

请注意，我取消了 CORS 请求部分的注释，并且响应 statusCode 设置为 200。当从客户端发送提交表单时，我的应用程序中执行的代码：

    uploadcontactusdata = async data => {
    try {
        console.log("Contact Us pressed")
        const settings = {
            method: 'POST',
            body: JSON.stringify(data),
            
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        }

        const fetchResponse = await API.post('econtactus', settings);
        Notification({
            title: 'Success',
            message: 'Notification has been sent',
            type: 'success'
        });
    }
    catch (err) {
        console.log("unable to send");
        console.error(err)
    }
}

我使用 Amplify（版本 4.41.2）创建了 API Gateway + Lambda。不知道现在还能去哪里看。任何线索将不胜感激。谢谢

4

1 回答 1

1

您可以使用 appsync 完全摆脱对 api 网关的需求。

amplify add api

选择graphql（我没有尝试过使用rest，但你不应该需要它）选择基本模式，如果你愿意，可以编辑它，然后发布。发布后，您可以创建自己的方法。您可以在 AppSync UI 中的 Schema 下查看此内容。

type Mutation {
  yourMethod(input: Input!): TableName <-- add your method to the list
}

现在在 Appsync 中选择数据源并添加数据源。给它一个名字，选择 lambda 作为类型，然后在列表中找到你的 lambda。添加后返回到您的架构并找到您在上面创建的方法。在右侧栏上找到您的方法，然后单击附加链接。找到您刚刚添加的数据源。填写区域和 lambda ARN。确保您选择新角色而不是现有角色。

您可能需要配置请求和响应模板。

请求：

{
  "version" : "2017-02-28",
  "operation": "Invoke",
  "payload": $util.toJson($context.args)
}

回应：

$util.toJson($context.result)

现在，您可以直接从 UI 调用 lambda 并返回结果，而无需担心 CORS 或管理 API 网关。

于 2021-01-21T21:30:22.283 回答