window.fetch() thinks there's a CORS error, Developer Console Network Tab Disagrees
I am trying to make an ajax request using window.fetch() to an AWS lambda function of mine.
I followed the AWS Lambda guide on setting up CORS (and redeployed).
I followed the MDN documentation on adding headers to window.fetch() to pass in my API key.
My code looks like this:
let myHeaders = new Headers();
myHeaders.append('x-api-key', lambda_key);
fetch('https://comically_long_aws_url.com/blah',
headers: myHeaders,
)
.then((res)=>
console.log('success,', res)
)
.catch((err)=>
console.log('err', err);
);
If I look at the network tab, I see that both the OPTIONS and GET request were successful. Indeed, the GET returned the expected information:
Successful OPTIONS request:
Successful GET request:
Expected data in GET request response body:
Unexpected errors displaying in console:
Why is the window.fetch().catch() error handler being invoked? Why is there a console error when the network call appears to be successful?
javascript amazon-web-services fetch-api
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
|
show 1 more comment
I am trying to make an ajax request using window.fetch() to an AWS lambda function of mine.
I followed the AWS Lambda guide on setting up CORS (and redeployed).
I followed the MDN documentation on adding headers to window.fetch() to pass in my API key.
My code looks like this:
let myHeaders = new Headers();
myHeaders.append('x-api-key', lambda_key);
fetch('https://comically_long_aws_url.com/blah',
headers: myHeaders,
)
.then((res)=>
console.log('success,', res)
)
.catch((err)=>
console.log('err', err);
);
If I look at the network tab, I see that both the OPTIONS and GET request were successful. Indeed, the GET returned the expected information:
Successful OPTIONS request:
Successful GET request:
Expected data in GET request response body:
Unexpected errors displaying in console:
Why is the window.fetch().catch() error handler being invoked? Why is there a console error when the network call appears to be successful?
javascript amazon-web-services fetch-api
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
3
The CORS headers are in the OPTIONS response but not in the GET. Must be in both
– charlietfl
Nov 12 '18 at 3:39
But why is the data still getting returned?
– Caleb Jay
Nov 12 '18 at 3:57
Do you mean the client GET headers? So i should add type:cors to the fetch?
– Caleb Jay
Nov 12 '18 at 3:58
3
Because server sends it. But browser won't let you access it when headers are missing. It's not server's responsibility to not send the data. CORS is approved/dissaproved by the browser
– charlietfl
Nov 12 '18 at 3:59
2
As for the headers ...server needs to add the access-control headers to response. Can't do it client side. The most critical one isaccess-control-allow-origin
– charlietfl
Nov 12 '18 at 4:02
|
show 1 more comment
I am trying to make an ajax request using window.fetch() to an AWS lambda function of mine.
I followed the AWS Lambda guide on setting up CORS (and redeployed).
I followed the MDN documentation on adding headers to window.fetch() to pass in my API key.
My code looks like this:
let myHeaders = new Headers();
myHeaders.append('x-api-key', lambda_key);
fetch('https://comically_long_aws_url.com/blah',
headers: myHeaders,
)
.then((res)=>
console.log('success,', res)
)
.catch((err)=>
console.log('err', err);
);
If I look at the network tab, I see that both the OPTIONS and GET request were successful. Indeed, the GET returned the expected information:
Successful OPTIONS request:
Successful GET request:
Expected data in GET request response body:
Unexpected errors displaying in console:
Why is the window.fetch().catch() error handler being invoked? Why is there a console error when the network call appears to be successful?
javascript amazon-web-services fetch-api
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
I am trying to make an ajax request using window.fetch() to an AWS lambda function of mine.
I followed the AWS Lambda guide on setting up CORS (and redeployed).
I followed the MDN documentation on adding headers to window.fetch() to pass in my API key.
My code looks like this:
let myHeaders = new Headers();
myHeaders.append('x-api-key', lambda_key);
fetch('https://comically_long_aws_url.com/blah',
headers: myHeaders,
)
.then((res)=>
console.log('success,', res)
)
.catch((err)=>
console.log('err', err);
);
If I look at the network tab, I see that both the OPTIONS and GET request were successful. Indeed, the GET returned the expected information:
Successful OPTIONS request:
Successful GET request:
Expected data in GET request response body:
Unexpected errors displaying in console:
Why is the window.fetch().catch() error handler being invoked? Why is there a console error when the network call appears to be successful?
javascript amazon-web-services fetch-api
javascript amazon-web-services fetch-api
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
asked Nov 12 '18 at 3:36
Caleb JayCaleb Jay
581420
581420
3
The CORS headers are in the OPTIONS response but not in the GET. Must be in both
– charlietfl
Nov 12 '18 at 3:39
But why is the data still getting returned?
– Caleb Jay
Nov 12 '18 at 3:57
Do you mean the client GET headers? So i should add type:cors to the fetch?
– Caleb Jay
Nov 12 '18 at 3:58
3
Because server sends it. But browser won't let you access it when headers are missing. It's not server's responsibility to not send the data. CORS is approved/dissaproved by the browser
– charlietfl
Nov 12 '18 at 3:59
2
As for the headers ...server needs to add the access-control headers to response. Can't do it client side. The most critical one isaccess-control-allow-origin
– charlietfl
Nov 12 '18 at 4:02
|
show 1 more comment
3
The CORS headers are in the OPTIONS response but not in the GET. Must be in both
– charlietfl
Nov 12 '18 at 3:39
But why is the data still getting returned?
– Caleb Jay
Nov 12 '18 at 3:57
Do you mean the client GET headers? So i should add type:cors to the fetch?
– Caleb Jay
Nov 12 '18 at 3:58
3
Because server sends it. But browser won't let you access it when headers are missing. It's not server's responsibility to not send the data. CORS is approved/dissaproved by the browser
– charlietfl
Nov 12 '18 at 3:59
2
As for the headers ...server needs to add the access-control headers to response. Can't do it client side. The most critical one isaccess-control-allow-origin
– charlietfl
Nov 12 '18 at 4:02
3
3
The CORS headers are in the OPTIONS response but not in the GET. Must be in both
– charlietfl
Nov 12 '18 at 3:39
The CORS headers are in the OPTIONS response but not in the GET. Must be in both
– charlietfl
Nov 12 '18 at 3:39
But why is the data still getting returned?
– Caleb Jay
Nov 12 '18 at 3:57
But why is the data still getting returned?
– Caleb Jay
Nov 12 '18 at 3:57
Do you mean the client GET headers? So i should add type:cors to the fetch?
– Caleb Jay
Nov 12 '18 at 3:58
Do you mean the client GET headers? So i should add type:cors to the fetch?
– Caleb Jay
Nov 12 '18 at 3:58
3
3
Because server sends it. But browser won't let you access it when headers are missing. It's not server's responsibility to not send the data. CORS is approved/dissaproved by the browser
– charlietfl
Nov 12 '18 at 3:59
Because server sends it. But browser won't let you access it when headers are missing. It's not server's responsibility to not send the data. CORS is approved/dissaproved by the browser
– charlietfl
Nov 12 '18 at 3:59
2
2
As for the headers ...server needs to add the access-control headers to response. Can't do it client side. The most critical one is
access-control-allow-origin– charlietfl
Nov 12 '18 at 4:02
As for the headers ...server needs to add the access-control headers to response. Can't do it client side. The most critical one is
access-control-allow-origin– charlietfl
Nov 12 '18 at 4:02
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255643%2fwindow-fetch-thinks-theres-a-cors-error-developer-console-network-tab-disagr%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255643%2fwindow-fetch-thinks-theres-a-cors-error-developer-console-network-tab-disagr%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
The CORS headers are in the OPTIONS response but not in the GET. Must be in both
– charlietfl
Nov 12 '18 at 3:39
But why is the data still getting returned?
– Caleb Jay
Nov 12 '18 at 3:57
Do you mean the client GET headers? So i should add type:cors to the fetch?
– Caleb Jay
Nov 12 '18 at 3:58
3
Because server sends it. But browser won't let you access it when headers are missing. It's not server's responsibility to not send the data. CORS is approved/dissaproved by the browser
– charlietfl
Nov 12 '18 at 3:59
2
As for the headers ...server needs to add the access-control headers to response. Can't do it client side. The most critical one is
access-control-allow-origin– charlietfl
Nov 12 '18 at 4:02