AWS API网关没有“Access-Control-Allow-Origin”标头

时间:2016-11-27 18:20:20

标签: jquery ajax amazon-web-services aws-lambda aws-api-gateway

我遇到了一个关于API网关的问题,我在这个AWS论坛上已经完成了所有其他的SO答案,并且已经通过他们的文档,但仍然没有乐趣。

我正在尝试使用AWS API网关设置API,该网关调用Lambda函数,该函数读取/写入DynamoDB中的表。

DynamoDB的Lambda函数正在运行。我在AWS中创建了一个API,并为它创建了一个GET和OPTIONS方法。我读AWS并没有强制执行只有GET / POST的选项,但是当没有OPTIONS方法时我在我的ajax调用中得到了预检错误,所以我添加了一个。

目前为了取得进展,我没有使用API​​密钥或授权。 我可以使用POSTMAN成功调用我的GET方法,POSTMAN返回DynamoDB表的内容。

但是当我尝试使用JQuery ajax调用时,我得到了

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我可以看到在网络标签下使用Chrome开发工具,OPTIONS方法返回状态200,GET返回状态200,但出现上述错误。

我尝试在OPTIONS和GET方法上启用CORS,在每次更改后重新部署API,尝试了以下(http://enable-cors.org/server_awsapigateway.html)但总是在控制台中得到相同的错误。

我正在从桌面上的文件执行ajax调用,所以origin是null,因为页面将部署到S3作为JS中的单个网页应用程序。

当我在GET和OPTIONS上启用CORS时,我可以看到Access-Control-Allow-Headers是'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'而Access-Control-Allow-Origin *是'*'

我的Ajax调用如下所示。我也尝试复制POSTMAN使用的确切标题,它具有Authorization标头集(我现在已在AWS中关闭)但我总是得到相同的错误

var awsHeaders = {};
awsHeaders['X-Amz-Date'] = '20161127T171734';

$('#add, #cloud').click(function() {

    $.ajax({

        type: 'GET',
        headers: awsHeaders,
        dataType : "json",
        url: '...',
        success: function (res) {

            console.log('response in GET:');
            console.log(res);

        },
        error: function(data) {
            console.log('in error');
            console.log(data);
        }

    });

});

任何人都可以了解我可能缺少的东西吗?

非常感谢

更新 请参阅下面的答案,关于我如何根据DigitalKapteain评论解决这个问题 - 在我的Lambda函数的响应中设置'Access-Control-Allow-Origin':'*'标题。我在AWS文档中查找了这个,但无法找到它。此链接描述了Lambda和Lambda Proxy之间的区别,并解释了使用CORS https://serverless.com/framework/docs/providers/aws/events/apigateway/时的操作

6 个答案:

答案 0 :(得分:47)

对Lambda函数的GET请求的响应也必须包含Access-Control-Allow-Origin标题。

答案 1 :(得分:22)

Digitalkapitaen的回答是正确的;这是代码,以节省别人查找how to set an HTTP response header in Lambda的麻烦:

exports.handler = function(event, context, callback) {
    callback(null, {
        "statusCode": 200,
        "headers": { 
            "Access-Control-Allow-Origin": "*" 
        }
    });
};

答案 2 :(得分:5)

如果这仍然不适合您,请确保使用$ .ajax时JSON.stringify()您的json对象。如果没有,您仍将返回一个声称与CORS相关的错误的错误。但是如果使用Postman发送相同的json对象,请求将成功。尝试一下......

答案 3 :(得分:0)

对于希望在Flask中集成@ Digitalkapitaen解决方案的人,请参阅以下代码:

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}})

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

通过执行以下操作安装flask-cors模块:

pip install -U flask-cors

答案 4 :(得分:0)

如果您只想更改一个标头而不是替换Words Like Jared答案中所示的所有标头。您可以使用以下代码:

'use strict';

module.exports.handler = (event, context, callback) => {
  const response = event.Records[0].cf.response;
  const headers = response.headers;

  headers['access-control-allow-origin'] = [{ key: 'Access-Control-Allow-Origin', value: "*" }];

  return callback(null, response);
};

可以在Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront上找到其他示例。与正常的Lambda函数相同。

答案 5 :(得分:0)

我遇到了同样的问题:在 S3 中配置了一个网站并尝试在 API 网关中进行 ajax 调用。在 API 网关中启用和部署 CORS 并得到同样的问题,在 Lambda 代码中设置响应头后问题已解决。

这是我的示例 Lambda 代码的片段:

Not Find Boost