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 with MIME type application/json. See for more details. getWord @ myproject.html:57 (anonymous) @ myproject.html:67
The client code
I am using a simple fetch:
var base_url = "=";
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?
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?
Share Improve this question edited Jul 1, 2018 at 16:32 sideshowbarker♦ 88.1k29 gold badges214 silver badges211 bronze badges asked Jun 21, 2018 at 18:24 RadioRadio 2,8531 gold badge22 silver badges43 bronze badges2 Answers
Reset to default 16I 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.
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: