被 CORS 策略"...does not have HTTP ok status"阻止(Amplify 和 ReactJS、AWS Gateway 和 Lambda)

Question

我几乎不好意思问这个问题，因为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项目，并尝试从真实域名开始，甚至消除与开发环境(Cloud 9运行npm版本6.14.8)有关的任何东西

我还用——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。不知道还能去哪里找。任何线索将不胜感激。由于

Answer 1

通过使用appsync，你可以完全不需要api网关。

amplify add api

选择graphql(我没有尝试使用rest，但你不应该需要它)选择基本模式，编辑它，如果你喜欢，并发布。一旦发布，你就可以创建自己的方法。你可以在Schema下的AppSync UI中查看。

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

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

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

要求:

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

为回应:

$util.toJson($context.result)

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

Answer 2

当您使用Amplify创建REST Api并且您有Cognito用户池和身份池时，Api由iAM角色进行身份验证。您的Cognito组有一个角色，您必须找到它。新的API还创建了一个新策略，但它们没有链接。将策略添加到希望访问该API的组中。许多答案要求您创建Authorizers并将授权类型从iAM更改为authorizer，但这并不是Amplify一直以来的意图。他们希望你通过iAM角色控制访问。