Chrome CORB 阻止 APIGateway lambda 请求

Posted

技术标签:

【中文标题】Chrome CORB 阻止 APIGateway lambda 请求【英文标题】:Chrome CORB blocking APIGateway lambda request 【发布时间】:2018-12-01 04:26:57 【问题描述】:

什么有效

我制作了一个简单的文字游戏。它工作得很好。用户要求的一件事是单词有效性检查。我在 AWS Lambda Proxy/Node.js 端点上运行 oxford 字典 api,当我通过浏览器访问 APIGateway uri 时效果很好。

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

采取的步骤

我在 AWS APIGateway 中启用了 CORS,并在开发过程中使用了“*”通配符。

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

遇到错误

我遇到了以下问题:

myproject.html:57 跨域读取阻止 (CORB) 阻止了 MIME 类型 application/json 的跨域响应 https://XXXXXXXXXXX.execute-api.us-east-2.amazonaws.com/prod/dictionary?word=help。有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768。 getWord@myproject.html:57 (匿名)@myproject.html:67

客户端代码

我正在使用简单的 fetch:

         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 问题如何解决?

【问题讨论】:

【参考方案1】:

显然我只需要坚持。以防万一有人遇到这种情况:

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

答案是确保在 APIgateway 中启用了 CORS,并且 lambda 函数响应回调模式包含“Access-Control-Allow-Origin”标头。

【讨论】:

谢谢!这很有帮助。 太棒了!从 CORB 文档本身不清楚。这拯救了我的一天! 我在 Lamda 上使用 python。我面临同样的问题。我已启用 CORS,但我不确定如何确保 lambda 函数响应回调模式包含“Access-Control-Allow-Origin”标头。你能帮忙吗? 例如见:***.com/questions/43190935/… 找到这个答案真是天赐之物,我们可能要花几天时间来解决这个问题!谢谢!【参考方案2】:

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

在我的情况下,我必须在添加标头后重新部署我的 API。 附上屏幕截图以防对某些用户有所帮助:

集成响应:

方法响应:

邮递员的标题响应 - 工作:

【讨论】:

这太棒了。我相信这个答案非常有用,但是“为什么”在当前的选中标记答案中,人们认为从修复方法中抽象出来有帮助。我建议人们阅读这两个答案以获得完整的理解。

以上是关于Chrome CORB 阻止 APIGateway lambda 请求的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 73 中阻止的 CORB OPTIONS 请求

CORB 阻止动态 AdSense 广告

如何删除 CORB 警告?

如何修复:谷歌浏览器的 CORB 块(Axios 请求)

跨域读取阻止 (CORB) 阻止了跨域响应 https://cdnjs.com/libraries/Chart.js

如何解决此问题:跨域读取阻塞 (CORB) 阻止了跨域响应