已被CORS策略“...没有HTTP ok状态”阻止(Amplify和ReactJS、AWS网关和Lambda)

e3bfsja2  于 2023-03-17  发布在  React
关注(0)|答案(2)|浏览(155)

我几乎尴尬地问这个问题,由于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)
    }
}

我创建了API网关+ Lambda使用放大(版本4.41.2)。不知道在其他地方看看现在。任何线索将不胜感激。谢谢

yhxst69z

yhxst69z1#

通过使用appsync,你完全可以摆脱对API网关的需求。

amplify add api

选择graphql(我没有尝试使用rest,但您应该不需要它),选择基本架构,根据需要进行编辑,然后发布。发布后,您可以创建自己的方法。您可以在AppSync UI中的“架构”下查看此方法。

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

现在在Appsync中选择DataSources并添加datasource。给予它一个名称,选择lambda作为类型,然后在列表中找到你的lambda,添加完毕后回到你的schema并找到你在上面创建的方法,在右边栏找到你的方法并点击attach链接,找到你刚添加的数据源,填写区域和lambda ARN。确保您选择的是新角色,而不是现有角色。
您可能需要配置请求和响应模板。
如有要求:

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

答复:

$util.toJson($context.result)

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

yruzcnhs

yruzcnhs2#

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

相关问题