Chrome CORS 阻止 API 网关 lambda 请求

Question

有效方法

我制作了一个简单的文字游戏。它很好用。用户要求的一件事是单词有效性检查。我正在运行在 AWS Lambda Proxy/Node.js 端点上使用牛津词典 api，这在我通过浏览器访问 API 网关 uri 时效果很好。

我选择了 AWS Lambda 函数来保护我的 Oxford API 密钥，并拥有更直接的 CORS 控制。

已走步数

我在 AWS API网关中启用了 CORS，并在开发过程中使用了“*”通配符。

我开始使用我的本地服务器 @ 127.0.0.1 编写游戏的附加代码。

遇到错误

我运行遇到以下问题：

myproject.html:57 跨源读取阻止 (CORB) 阻止了跨源响应 https://XXXXXXXXXXX.execute-api.us-east-2.amazonaws.com/prod/dictionary?word=help with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 了解更多详细信息。 getWord @ myproject.html:57 （匿名）@ myproject.html:67

客户端代码

我正在使用简单的获取：

         var base_url = "https://XXXXXXXXXXX.execute-api.us-east-2.amazonaws.com/prod/dictionary?word=";
            getWord = function(word){
               fetch(base_url+word, {
                    headers: {
                        'content-type': 'application/json'
                    },
                    method: 'GET', 
                    mode: 'cors'
               }).then(function(response) {
                    console.log(response);
               });
            }

问题

我从未听说过 CORB。我不明白是什么触发了 CORB，以及解决这个问题的步骤是什么。 CORB 问题是如何解决的？

Answer 1

显然我只是需要坚持。以防万一有人遇到这个：

尽管启用了 APIGateway CORS，但 CORS 权限会传递给启用了 Lambda 代理集成的 lambda 函数。尽管 API 网关接受了初始 URI 请求，但最终由于 lambda 响应中缺少 header 而失败。不知何故，这触发了 CORB 而不是 CORS。不知道为什么。

答案是确保在 API 网关中启用 CORS，并且 lambda 函数响应回调模式包含 "Access-Control-Allow-Origin" header.

Answer 2

我有类似的问题。我建议使用 POSTMAN 进行调试，因为它显示 headers 并允许您调整请求中需要的任何内容。

在我的例子中，我必须在添加 header 之后 re-deploy 我的 API。附上屏幕截图以防对某些用户有帮助：

集成响应：

方法响应：

邮递员的 header 回复 - 工作：

Chrome CORS 阻止 API 网关 lambda 请求

Chrome CORB blocking APIGateway lambda request

javascript

node.js

cors

aws-lambda

cross-origin-read-blocking