我有一个AWS Lambda函数,它运行正常并返回以下内容:
{
"statusCode": 200,
"headers": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": true,
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "OPTIONS, PUT, POST, GET, DELETE"
},
"body": JSON.stringify("Success")
}
我为该Lambda函数在API Gateway中创建了一个资源,并在该资源下配置了一个POST方法。
配置步骤如下:
- 在资源级别启用了CORS,选择了所有允许的方法并保存。
- 在方法请求部分将请求体内容类型设置为
application/json
,模型选择为空。
- 集成请求中的映射模板配置为当内容类型等于
application/json
时,模板体包含如下代码:
{
"company": "$input.json('$.company')",
"newGoalGroups": $input.json('$.newGoalGroups')
}
- 在方法响应部分的响应头中包含了三个项:'Access-Control-Allow-Headers'、'Access-Control-Allow-Methods' 和 'Access-Control-Allow-Origin'。
- 响应体的内容类型设置为 'application/json'。
我在API Gateway控制台测试了这个方法,运行成功。
尝试从前端(托管在AWS Amplify上)调用Lambda函数:
try {
console.log(`Url: ${apiGatewayUrl}${resourcePath}`);
console.log(body);
const response = await fetch(`${apiGatewayUrl}${resourcePath}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response;
} catch (error) {
console.error('Error:', error);
}
fetch参数是正确的(在同一资源组中有另一个运行良好的GET方法,这部分代码是从那里复制过来的)。
遇到的错误是:TypeError: Failed to fetch
浏览器控制台显示了以下消息:
“访问'https://xx.execute-api.eu-north-1.amazonaws.com/prod/GoalGroup' 的请求被源 'https://dev.xy.amplifyapp.com' 的CORS策略阻止。预检请求通过访问控制检查失败,因为 'Access-Control-Allow-Origin' 头部的值 'https://dev.xy.amplifyapp.com/' 并不等于提供的源。请服务器发送带有有效值的该头部,或者如果不需要透明响应,可以将请求的模式设置为 'no-cors' 来禁用CORS的情况下获取资源。”
在同一资源下,我还配置了GET、PUT和POST方法,其中GET方法运行良好,而PUT和POST方法遇到了同样的错误。
请教如何解决PUT和POST方法无法正常工作的问题。