[英]Call to API Gateway returning CORS error despite headers being set
我有一个与 Lambda function 集成的 API 网关(HTTP 类型)。我正尝试从本地主机调用 function,如下所示:
const jwt = getAuthToken();
const formBody = new FormData();
formBody.set('user', 'test');
const res = await fetch('https://example.execute-api.eu-west-1.amazonaws.com/default/GetShareValue', {
method: 'POST',
body: formBody,
headers: {
'Authorization': jwt
}
});
但是,我收到此错误消息:
CORS 策略阻止了从来源“http://localhost:3000”访问“https://example.execute-api.eu-west-1.amazonaws.com/default/GetShareValue”:对预检的响应请求未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”header。 如果不透明的响应满足您的需求,请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
我知道不正确的 CORS 设置会阻止浏览器显示 Lambda function 返回的内容。 但是,我的 API 网关指定了 CORS 设置:
根据此线程,在 Lambda 函数的响应中设置标头很重要。 我已将它们设置为相同。 这是我的 Lambda function:
exports.handler = async (event, context) => {
let body;
let statusCode = '200';
const headers = {
'Content-Type': 'application/json',
"Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "*",
"X-Requested-With": "*"
};
try {
body = "Success!!";
} catch (err) {
statusCode = '400';
body = err.message;
} finally {
body = JSON.stringify(body);
}
return {
statusCode,
body,
headers,
};
};
我可以在 Postman 中调用这个端点——它不关心 CORS——所以我知道它在工作。 我开始认为这是 AWS 本身的一个错误。
为了@peter n 的利益回答我自己的问题。
最后我放弃了HTTP API网关。 我相信 AWS 中存在一个错误,因为当我通过 REST API 触发它时,完全相同的 Lambda function 起作用了。这就是我所做的。
我输入了以下设置:
方法:POST
访问控制允许方法:选项,POST
Access-Control-Allow-Headers :'Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods ,访问控制允许来源,访问控制允许标头'
访问控制允许来源:'*'
然后单击“启用 CORS 并替换现有的 CORS 标头”。
你还没有完成。 如果您的目标是 Lambda function,这仍然无法解决问题。您需要将 CORS 标头添加到 Lambda 的实际响应中。
这是我的 Lambda 的完整代码:
exports.handler = async (event, context) => {
let body = JSON.stringify('Success!');
let statusCode = '200';
const headers = {
'Content-Type': 'application/json',
"Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "*",
"X-Requested-With": "*"
};
return {
statusCode,
body,
headers,
};
};
我不确定您在 Lambda 中返回的 CORS 设置是否与您在 AWS 控制台中应用的 CORS 设置相同。
这真是令人头疼,除非我做错了什么,否则 AWS 已经非常糟糕地实现了这一点。
更新:在遇到更多问题后,我想我会更新我对 state 的回答,您提出的请求似乎也会影响 CORS。我正在对我的 API 进行更改,CORS 错误又开始发生; 最终,唯一的解决方案是删除我发送给 AWS 的请求中的一些标头。
这导致了 CORS 错误:
const res = await fetch('https://123.execute-api.eu-west-1.amazonaws.com/test', {
method: 'POST',
headers: {
'Authorization': jwt,
"Access-Control-Allow-Origin": "*" // This had to be removed to fix the CORS error
}
});
如您所见,我在我的 API 的出站请求中指定了Access-Control-Allow-Origin
。这一直存在并且从未引起问题,但现在看来我可以在请求中注释和取消注释该行并获取/不-得到 CORS 错误。
更新 #2:进一步更新,以拯救可能为此而用头撞墙的任何人。在向现有 API 网关添加新源和方法后,请务必单击“ Actions > Deploy API
,以便您的更改实际生效。
AWS 确实需要清理 API 网关和 Lambda 的整个 UI。根本不清楚您有未发布的更改,甚至需要发布; 用户界面使任何更改看起来都立即生效。
主要问题在于 Options 方法提供的答案。 出于某种原因,至少在我的情况下,模拟响应无法正常工作,因此我将其与 lambda 链接,其唯一目的是使用 200 代码进行响应并返回所有必要的标头。
因此,您要做的是,在启用了 CORS 的资源的选项方法中,将集成请求更改为 Lambda。
完成后,我们必须开发 lambda,以便它返回 200 作为响应并接受所有必要的标头:
{
'statusCode': 200,
'headers': {
'Content-Type': 'application/json',
"Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "*",
"X-Requested-With": "*"
},
'body': json.dumps({})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.