API网关CORS:没有'Access-Control-Allow-Origin'标头

Question

虽然已经通过API网关设置了CORS并且设置了Access-Control-Allow-Origin标头,但在尝试从Chrome中的AJAX调用API时仍然会收到以下错误:

XMLHttpRequest无法加载http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.响应具有HTTP状态代码403.

我试图通过Postman获取URL ,它显示上面的标题已成功通过:

并从OPTIONS响应:

如何在不恢复JSON-P的情况下从浏览器调用我的API？

Answer 1

我遇到了同样的问题.我用了10个小时才发现.

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js

'use strict';

module.exports.hello = function(event, context, callback) {

const response = {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 
  },
  body: JSON.stringify({ "message": "Hello World!" })
};

callback(null, response);
};

Answer 2

如果还有其他人遇到这种情况 - 我能够在应用程序中找到根本原因.

如果您使用自定义授权程序运行API-Gateway,API-Gateway将在实际命中服务器之前发送401或403.默认情况下 - 从自定义授权程序返回4xx时,未为CORS配置API网关.

此外 - 如果您正在通过API网关获取0或1来自请求的状态代码,这可能是您的问题.

要修复 - 在API网关配置中 - 转到"网关响应",展开"默认4XX"并在其中添加CORS配置标头.即

Access-Control-Allow-Origin: '*'

确保重新部署您的网关 - 瞧!

Answer 3

如果您已经尝试了有关此问题的所有方法，但都无济于事，那么您最终会得到我所做的。事实证明，亚马逊现有的 CORS 设置指导工作得很好……只要确保你记得重新部署！CORS 编辑向导，即使有所有漂亮的小绿色复选标记，也不会对您的 API 进行实时更新。也许很明显，但它难倒了我半天。

Answer 4

1)我需要和@riseres一样做以及其他一些更改.这是我的回复标题:

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

2和

根据这个文件:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

在API网关配置上使用代理进行lambda函数时,post或get方法没有添加标题,只有选项可以.您必须在响应(服务器或lambda响应)中手动执行此操作.

3)和

除此之外,我需要在API网关post方法中禁用"API Key Required"选项.

Answer 5

我刚刚在我的 lambda 函数响应中添加了标头，它就像一个魅力

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hey it works'),
        headers:{ 'Access-Control-Allow-Origin' : '*' }
    };
    return response;
};

Answer 6

让我的示例工作:我刚刚在生成的nodejs Lambda函数中插入了"Access-Control-Allow-Origin":'*',在header:{}内.我没有对Lambda生成的API层进行任何更改.

这是我的NodeJS:

'use strict';
const doc = require('dynamodb-doc');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
    const done = ( err, res ) => callback( null, {
        statusCode: err ? '400' : '200',
        body: err ? err.message : JSON.stringify(res),
        headers:{ 'Access-Control-Allow-Origin' : '*' },
    });
    switch( event.httpMethod ) {
        ...
    }
};

这是我的AJAX电话

$.ajax({
    url: 'https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x',
    type: 'GET',
    beforeSend: function(){ $( '#loader' ).show();},
    success: function( res ) { alert( JSON.stringify(res) ); },
    error:function(e){ alert('Lambda returned error\n\n' + e.responseText); },
    complete:function(){ $('#loader').hide(); }
});

Answer 7

对于 Google 员工：

原因如下：

• 简单请求，或者，GET/POST没有 cookie 不会触发预检
• 当您为路径配置 CORS 时，API Gateway 只会OPTIONS为该路径创建一个方法，然后Allow-Origin在用户调用时使用模拟响应发送标头OPTIONS，但GET/POST不会Allow-Origin自动获取
• 如果您尝试在 CORS 模式下发送简单请求，您将收到错误消息，因为该响应没有Allow-Origin标头
• 您可以遵循最佳实践，简单的请求并不意味着向用户发送响应，将身份验证/cookie 与您的请求一起发送以使其“不简单”并且预检将触发
• 尽管如此，您仍必须为以下请求自行发送 CORS 标头 OPTIONS

把它们加起来：

• OPTIONSAPI Gateway 会自动生成无害的
• OPTIONS仅被浏览器用作检查路径上 CORS可能性的预防措施
• 是否接受CORS取决于实际方法，例如GET/POST
• 您必须在响应中手动发送适当的标头

Answer 8

对我来说，最终有效的答案是 James Shapiro 的评论来自 Alex R 的答案（第二高投票）。我首先遇到了这个 API 网关问题，尝试获取托管在 S3 中的静态网页以使用 lambda 处理联系我们页面并发送电子邮件。只需检查 [ ] Default 4XX 即可修复错误消息。

Answer 9

我在里面找到了一个简单的解决方案

API 网关 > 选择您的 API 端点 > 选择方法（在我的情况下是 POST）

现在有一个下拉操作 > 启用 CORS .. 选择它。

现在再次选择下拉 ACTIONS > Deploy API（重新部署它）

有效 ！