Chrome CORB blocking APIGateway lambda request

Question

What works

I have a simple word game I've built. It works great. One thing users have requested is a word validity check. I am running the oxford dictionary api on an AWS Lambda Proxy/Node.js end-point, which works great when I access the APIGateway uri via the browser.

I chose an AWS Lambda function in order to protect my Oxford API key, and have more direct CORS control.

Steps taken

I have enabled CORS in the AWS APIGateway, and using a "*" wildcard during development.

I started to code the addition to the game, using my local server, @ 127.0.0.1.

Error encountered

I have run into the following issue:

myproject.html:57 Cross-Origin Read Blocking (CORB) blocked cross-origin response 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 for more details. getWord @ myproject.html:57 (anonymous) @ myproject.html:67

The client code

I am using a simple 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);
               });
            }

The question

I have never heard of CORB. I don't understand what is triggering CORB, and what the steps are to resolve this. How are CORB issues resolved?

score 16 · Accepted Answer · answered Jun 21 '18 at 20:09

16

I just needed to persevere apparently. Just in case anyone ever runs into this:

Despite APIGateway CORS enablement, CORS authority is passed to the lambda function with Lambda proxy integration enabled. Although the initial URI request was accepted at the APIgateway, it ultimately failed due to lack of headers in the lambda response. Somehow This triggered CORB instead of CORS. I don't know why.

The answer is to ensure CORS is enabled in the APIgateway and that the lambda function response callback pattern contains a "Access-Control-Allow-Origin" header.

answered Jun 21 '18 at 20:09

Radio

2,810
1
21
43

1

Thanks! this was quite helpful. – Nour Aug 06 '18 at 07:13
1

Awesome !! Not clear from CORB documentation itself. This saved my day !! – mithrandir Dec 10 '18 at 00:15
I am using python on Lamda. I am facing the same issue. I have enabled CORS but I am not sure how to ensure that the lambda function response callback pattern contains a "Access-Control-Allow-Origin" header. Can you help? – Ranjith Ramachandra Feb 21 '19 at 18:12
1

For an example See: https://stackoverflow.com/questions/43190935/setting-http-response-header-from-aws-lambda – Radio Feb 22 '19 at 03:38
1

Finding this answer was a godsend, we'd have probably have spent days trying to work that out! Thanks! – Ross Coundon May 16 '19 at 07:34

score 2 · Answer 2 · answered Dec 05 '19 at 04:40

2

I had similar issue. I suggest using POSTMAN for debugging it as it shows headers and allows you to tweak whatever is needed in your request.

In my case I had to re-deploy my API after adding the header. Attaching screenshot in case it might be of help to some users:

Integration response:

Method response:

Postman's headers response - working:

answered Dec 05 '19 at 04:40

Witold Kaczurba

9,845
3
58
67

1

This is excellent. I believe this answer is very useful, but the "why" is in the current check marked answer which people find helpful abstracted from the methodology of a fix. I recommend people read both answers for a complete understanding. – Radio Dec 06 '19 at 15:38

Chrome CORB blocking APIGateway lambda request

2 Answers2