我正在调用一个使用 lambda 函数的 AWS API。 我从托管在 S3(静态网络托管)中的 HTML 页面调用它。 在调用 API 时,我收到 CORS 错误:

CORS 策略已阻止从源 '' 访问 XMLHttpRequest:请求的资源上不存在“Access-Control-Allow-Origin”标头。

我在 API 上启用 CORS,在 S3 存储桶上指定 CORS 后尝试过它,但它不起作用。 似乎,我错过了要指定 CORS 标头的正确位置。

附加信息:我在 chrome 开发者工具中得到以下信息

**Response Headers**
content-length: 42
content-type: application/json
date: Mon, 24 Feb 2020 04:28:51 GMT
status: 403
x-amz-apigw-id: IYmYgFQvoAMFy6Q=
x-amzn-errortype: MissingAuthenticationTokenException
x-amzn-requestid: 79b18379-383d-4ddb-a061-77f55b5727c3

**Request Headers**
authority: apiid-api.us-east-1.amazonaws.com
method: POST
path: /Prod
scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,hi;q=0.8
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: https://apiid.execute-api.us-east-1.amazonaws.com/Prod
content-length: 117
content-type: application/json; charset=UTF-8
origin: http://example.com
referer: http://example.com/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Lambda 函数代码:

var AWS = require('aws-sdk');
var ses = new AWS.SES();

var RECEIVER = 'example@gmail.com';
var SENDER = 'example@gmail.com';

var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
 "statusCode": 200,
 "body": "{\"result\": \"Success.\"}"
 };

exports.handler = function (event, context) {
    console.log('Received event:', event);
    sendEmail(event, function (err, data) {
        context.done(err, null);
    });
};

function sendEmail (event, done) {
    var params = {
        Destination: {
            ToAddresses: [
                RECEIVER
            ]
        },
        Message: {
            Body: {
                Text: {
                    Data: 'name: ' + event.name + '\nphone: ' + event.phone + '\nemail: ' + event.email + '\ndesc: ' + event.desc,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'Website Referral Form: ' + event.name,
                Charset: 'UTF-8'
            }
        },
        Source: SENDER
    };
    ses.sendEmail(params, done);
}

#1楼 票数:1

请求的资源上不存在“Access-Control-Allow-Origin”标头。

这表示您请求的资源,即您通过 API 网关的 Lambda,未在其响应中返回Access-Control-Allow-Origin标头; 浏览器期望来自 API 的响应中包含 CORS 标头(可能是因为 OPTIONS 请求),但响应中没有这些标头。

您没有这么具体说,但我假设您在 API 网关上使用 Lambda 代理集成。 要解决您的问题,请将Access-Control-Allow-Origin: *标头添加到您的 Lambda 返回的响应中。 您尚未指定 Lambda 的编写语言,或提供您的 Lambda 代码,但如果它是在 NodeJS 中,您将返回的代码片段可能如下所示:

    const result = {
        statusCode: 200,
        headers: {
            'Access-Control-Allow-Origin': '*',
            // other required headers
        },
        body: object_you_are_returning
    };

    return result;

#2楼 票数:0

非常令人惊讶的是,原因似乎是“客户端不应该有 'Access-Control-Allow-Origin': '*'。 显然,这应该只出现在 Lambda 代码中,将它添加到 jQuery 代码中会由于某种原因导致预检失败。” https://github.com/serverless/serverless/issues/4037#issuecomment-320434887

评论后补充信息:

我还尝试使用 S3 中托管的 ajax 通过 API Gateway 调用我的 Lambda 函数。 我尝试了很多建议,尤其是这个解决方案( http://stackoverflow.com/a/52683640/13530447 ),但没有一个对我有用。 在 Chrome 的开发人员模式下,我一直看到错误"Access to XMLHttpRequest at '[my API]' from origin '[my S3 website]' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response." 我通过在 ajax 中删除'Access-Control-Allow-Origin': '*'解决了这个问题。 仍然以解决方案( http://stackoverflow.com/a/52683640/13530447 )为例,它会通过改变来工作

$.ajax(
{
    url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
    headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'
},
    crossDomain: true,
    type:'GET',
    dataType: 'text',
    success: function(data)
    {
        window.alert(data);
    }
}); 

进入

$.ajax(
{
    url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
    headers: {'Content-Type': 'application/json'},
    crossDomain: true,
    type:'GET',
    dataType: 'text',
    success: function(data)
    {
        window.alert(data);
    }
});

  ask by Chhannoo translate from so

未解决问题?本站智能推荐:

1回复

请求的资源(AWS、API网关、S3、CORS)上不存在“Access-Control-Allow-Origin”标头

我正在尝试使用 API Gateway SDK 将图像文件上传到我的 S3 存储桶。 但是我不断收到以下错误: 下面是我点击上传时启动的 javascript 代码: 我在我的 API 网关上为 PUT 方法启用了 CORS。 (一切都得到了检查标记)。 我尝试使用和不使用Access-Contr
2回复

从源“S3_​​host_url”获取“API_Gateway_URL”的访问已被CORS政策阻止

我知道以前有人问过这个问题,但我找不到任何可以解决我的问题的答案,所以如果重复,请原谅我。 我创建了一个从 DynamoDB 表读取数据的 Lambda 函数。 我为这个 Lambda 函数创建了一个 API 网关。 当我直接在浏览器中点击 url 时,我得到了预期的结果。 但是,当我在 React
2回复

来自s3存储桶的API网关cors问题

我真的被困在这里,我发现的与 cors 相关的解决方案都没有帮助,所以这是我最后的手段。 我创建了一个带有 POST 方法的 API 网关,该方法会触发一个 Lambda 函数,该函数将一个项目添加到 DynamoDB 表中。 当我在 API Gateway 中尝试 POST 方法时,一切正常,但如
1回复

AWS-CORS无法将文件直接上传到S3

我正在尝试使用jquery将文件直接上传到S3。 我按照以下步骤配置了CORS设置文件,如下所示进行测试: 然后我的jQuery代码: 如果我直接发布表单而不使用ajax,则可以正常工作...但是由于我想在上传完成后立即调用方法,因此我正在使用jquery来完成此工作。 但是,即使
1回复

AWS的CORS标头失败-Cloudfront,S3和W3TotalCache

**已解决-这里的问题是已将Cloudfront的DNS记录指定为TXT记录。 将其更改为CNAME可解决问题。 如果有人能提供任何有关为何此次微调可以解决字体文件看似无关的错误的见解,我就耳目一新:) 因此,我一直在阅读有关该主题的几乎所有内容,而我对于如何使它变得如此复杂感到迷茫。
1回复

S3被CORS策略阻止

我已经通过 AWS 上的 Elastic Beanstalk 在 S3 上部署了一个 React 应用程序(前端)和一个 Laravel PHP API(后端)。 我的 React 应用程序在我的后端有 API 调用,但不幸的是它们被 CORS 阻止了。 有人知道这里有什么问题吗? 我将不胜感激谢谢
1回复

画布受到CORS数据和S3的污染

我的应用程序显示存储在AWS S3中的图像(出于安全原因,在私有存储桶中)。 为了允许用户从浏览器中查看图像,我生成了签名的URL,如https://s3.eu-central-1.amazonaws.com/my.bucket/stuff/images/image.png?X-Amz-Al
1回复

使用CORS从S3中删除文件

我在亚马逊S3上存储图像。 我终于使用XMLHttpRequest上传了图像(遵循这里提出的想法: 上传图像 ),并且它工作得非常好。 现在我试图从s3删除图像,但是当我将xml.open上的方法更改为'DELETE'时,发送表单亚马逊会响应禁止的消息。 我确实在AWS控制台的权限下启用