关于ajax：API网关CORS：没有’Access-Control-Allow-Origin’标头

API Gateway CORS: no 'Access-Control-Allow-Origin' header

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

XMLHttpRequest cannot load http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

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

Passed headers

并从OPTIONS响应：

Response headers

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

相关讨论

你在S3上安装了吗？如果是的话，你能提出Bucket Policy吗？确保您的政策中包含该方法
没有@iSkore它被设置在另一台服务器上进行测试。我也尝试过从我的PC和其他服务器本地访问文件。我是否需要在页面托管服务器上配置以允许使用CORS？我的理解是只有API服务器需要为CORS更改设置。
那你有没有为你的API添加CORS策略？你是什??么意思'页面托管服务器'？只是常规服务器或静态服务器
是的，通过AWS API Gateway中的"启用CORS"选项
知道了，你是否包含了一项政策？
这可能有也可能没有帮助，但发现此链接：stackoverflow.com/questions/10636611/
OPTIONS调用是否成功？你可以发布OPTIONS调用的结果吗？如果OPTIONS调用因auth或其他错误而失败，您将看到这一结果
我在这个问题上添加了OPTIONS结果
那你到底想要做什么？获取数据或找出可用的OPTIONS连接。此外，如果您使用的是CloudFront，有时需要一段时间才能将文件传送到CDN。这仅适用于您在过去一两小时内设置CloudFront的情况。
嘿，检查一下。这家伙也在使用AJAX。 stackoverflow.com/questions/20035101/
此处的API网关团队...如果您在控制台中使用"启用CORS"功能，则配置应该是正确的。我最好的猜测是，您没有在浏览器正在执行的JavaScript中调用API中的正确资源路径。如果您尝试对不存在的方法/资源/阶段进行API调用，您将收到没有任何CORS标头的通用403。如果您正在调用正确的资源，我不会看到浏览器如何错过Access-Control-Allow-Origin标头，因为Postman中的OPTIONS调用显然包含所有正确的CORS标头。
@JackKohn我验证了资源路径是否正确，并且能够通过Chrome中的URL直接成功访问该方法。此外，该错误明确提到缺少"Access-Control-Allow-Origin"标头。
大多数情况下，这种误导性错误消息是由于GET因404或403错误而失败。在这些情况下，服务不会返回CORS头。客户端是否使用凭据对请求进行签名，并且是那些授权调用该API /方法的凭据的IAM策略？您能否确认客户端使用的URL是否正确？
@ RyanG-AWS客户端未签署请求，因为API使用特定于用户的令牌通过其调用的资源进行身份验证，因此凭据不是一个因素。我可以通过直接在浏览器中访问URL来调用API，然后我得到相应的响应。
@makinbacon：你找到了解决方案吗？我在这里遇到同样的问题。
@Nirmal我想我删除了API并重新添加它，然后启用了CORS，它对我有用。我仍然不确定是什么改变导致它工作。
@makinbacon：啊，我刚刚尝试过，但它有一些奇怪的原因。我有数百种资源和方法，重建所有这些资源和方法将是一项艰巨的任务。这也可以通过在Integration Response中手动指定标头来实现。无论哪种方式，这都是很多工作。谢谢您的帮助。
我的方法和阶段由Lambda自动生成。事后我启用了CORS。与OP相同的错误。我吹走了自动生成的东西，创建了一个新的API和方法，部署到一个新的阶段，它运行良好。
刚试过这个，没有运气:(
请参阅我的答案，这可能与API密钥问题有关，stackoverflow.com / items / 34325009 /
我们需要在实际的ajax请求中看到响应中的标头，这会引发错误。邮递员的结果并不是那么有用。该错误表明所述标题不存在，我更倾向于认为它不存在而不是错误被抛出，说明实际上不存在某些东西。
The response had HTTP status code 403明确暗示您收到错误响应，并且错误响应可能没有所述的cors标头。
我的解决方案是删除API网关并创建一个新的，enble cors。谢谢！！！

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 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);
};

相关讨论

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

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

此外 - 如果您恰好从通过API网关运行的请求获取0或1的状态代码，这可能是您的问题。

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

1	Access-Control-Allow-Origin: '*'

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

相关讨论

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

1
2
3
4
5
6

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"选项。

相关讨论

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

这是我的NodeJS：

1
2
3
4
5
6
7
8
9
10
11
12
13

'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电话

1
2
3
4
5
6
7
8
9
10

$.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

' + e.responseText); },
complete:function(){ $('#loader').hide(); }
});

相关讨论

在我意识到lambda授权人失败并因某些未知原因被转换为CORS错误后，我得到了我的工作。对我的授权人(以及我应该首先添加的一些授权人测试)的简单修复，并且它有效。对我来说，需要API网关操作"启用CORS"。这添加了我在API中所需的所有标题和其他设置。

相关讨论

如果你已经尝试过关于这个问题的一切都无济于事，那么你最终会在我所做的事情上结束。事实证明，亚马逊现有的CORS设置方向工作得很好......只是确保你记得重新部署！ CORS编辑向导，即使有所有漂亮的小绿色复选标记，也不会对您的API进行实时更新。也许显而易见，但它让我困扰了半天。

enter image description here

此问题的另一个根本原因可能是HTTP / 1.1和HTTP / 2之间的差异。

症状：某些用户(并非所有用户)在使用我们的软件时都报告出现了CORS错误。

问题：有时会丢失Access-Control-Allow-Origin标题。

上下文：我们有一个Lambda，专门用于处理OPTIONS请求并使用相应的CORS头回复，例如Access-Control-Allow-Origin匹配列入白名单的Origin。

解决方案：API网关似乎将所有标头转换为小写，用于HTTP / 2调用，但保持HTTP / 1.1的大小写。这导致对event.headers.origin的访问失败。

检查您是否也遇到此问题：

假设您的API位于https://api.example.com，并且您的前端位于https://www.example.com。使用CURL，使用HTTP / 2发出请求：

1	curl -v -X OPTIONS -H 'Origin: https://www.example.com' https://api.example.com

响应输出应包括标题：

< Access-Control-Allow-Origin: https://www.example.com

使用HTTP / 1.1(或使用小写Origin标头)重复相同的步骤：

1	curl -v -X OPTIONS --http1.1 -H 'Origin: https://www.example.com' https://api.example.com

如果缺少Access-Control-Allow-Origin标头，则可能需要在读取Origin标头时检查区分大小写。

就我而言，由于我使用AWS_IAM作为授权方法，因此我需要授予IAM角色权限以命中端点。

我正在运行aws-serverless-express，在我的情况下需要编辑simple-proxy-api.yaml。

在将CORS配置为https://example.com之前，我只是换了我的站点名称并通过npm run setup重新部署，并更新了我现有的lambda / stack。

1
2
3
4
5
6
7
8

#...
/:
#...
method.response.header.Access-Control-Allow-Origin:"'https://example.com'"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin:"'https://example.com'"
#...

就我而言，我只是错误地写了获取请求URL。在serverless.yml上，将cors设置为true：

1
2
3
4
5
6
7
8
9

register-downloadable-client:
handler: fetch-downloadable-client-data/register.register
events:
- http:
path: register-downloadable-client
method: post
integration: lambda
cors: true
stage: ${self:custom.stage}

然后在lambda处理程序上发送标题，但如果你在前端使获取请求错误，你就不会在响应中得到那个标题而你会得到这个错误。因此，请在前面仔细检查您的请求网址。

在Python中，您可以按照以下代码执行此操作：

1
2
3
4
5
6
7
8
9
10
11

{"statusCode" : 200,
'headers':
{'Content-Type': 'application/json',
'Access-Control-Allow-Origin':"*"
},
"body": json.dumps(
{
"temperature" : tempArray,
"time": timeArray
})
}

我发现了一个简单的解决方案

API网关>选择您的API端点>选择方法(在我的情况下，它是POST)

现在有一个下拉列表ACTIONS> Enable CORS ..选择它。

现在再次选择下拉列表ACTIONS> Deploy API(重新部署它)

enter image description here

有效！