error.response is undefined if axios request fails
I cannot access the error (response) status code if an axios request has failed in my Vue.js app. I cannot figure out why the response is undefined in both '.catch' and 'axios.interceptors.response'. I followed this instruction that demonstrates that 'error.response' can be easily accessed with a code like this:
axios.interceptors.response.use(
(response) =>
console.log(response);
return response;
,
(error) =>
handleApiFail(error.response);
);
If I add this code to 'main.js' in my app, 'handleApiFail' is called when a request fails, but error.response is undefined in the second lambda and the first lambda is not called. If a request succeeded the 'response' in the first lambda is defined and has the status code.
EDIT1: this is not an option because my OPTIONS requests do not require authorization. Also there are various posts describing the same situation.
axios
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
add a comment |
I cannot access the error (response) status code if an axios request has failed in my Vue.js app. I cannot figure out why the response is undefined in both '.catch' and 'axios.interceptors.response'. I followed this instruction that demonstrates that 'error.response' can be easily accessed with a code like this:
axios.interceptors.response.use(
(response) =>
console.log(response);
return response;
,
(error) =>
handleApiFail(error.response);
);
If I add this code to 'main.js' in my app, 'handleApiFail' is called when a request fails, but error.response is undefined in the second lambda and the first lambda is not called. If a request succeeded the 'response' in the first lambda is defined and has the status code.
EDIT1: this is not an option because my OPTIONS requests do not require authorization. Also there are various posts describing the same situation.
axios
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
add a comment |
I cannot access the error (response) status code if an axios request has failed in my Vue.js app. I cannot figure out why the response is undefined in both '.catch' and 'axios.interceptors.response'. I followed this instruction that demonstrates that 'error.response' can be easily accessed with a code like this:
axios.interceptors.response.use(
(response) =>
console.log(response);
return response;
,
(error) =>
handleApiFail(error.response);
);
If I add this code to 'main.js' in my app, 'handleApiFail' is called when a request fails, but error.response is undefined in the second lambda and the first lambda is not called. If a request succeeded the 'response' in the first lambda is defined and has the status code.
EDIT1: this is not an option because my OPTIONS requests do not require authorization. Also there are various posts describing the same situation.
axios
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
I cannot access the error (response) status code if an axios request has failed in my Vue.js app. I cannot figure out why the response is undefined in both '.catch' and 'axios.interceptors.response'. I followed this instruction that demonstrates that 'error.response' can be easily accessed with a code like this:
axios.interceptors.response.use(
(response) =>
console.log(response);
return response;
,
(error) =>
handleApiFail(error.response);
);
If I add this code to 'main.js' in my app, 'handleApiFail' is called when a request fails, but error.response is undefined in the second lambda and the first lambda is not called. If a request succeeded the 'response' in the first lambda is defined and has the status code.
EDIT1: this is not an option because my OPTIONS requests do not require authorization. Also there are various posts describing the same situation.
axios
axios
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
edited Nov 13 '18 at 17:09
Alexey Starinsky
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
asked Nov 13 '18 at 15:07
Alexey StarinskyAlexey Starinsky
53610
53610
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:
JSON.stringify(error)
Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960
As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
1
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
1
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
add a comment |
The lack of
access-control-allow-origin: *
header in the response caused the browser to block my request.
Adding the header makes axios work fine.
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
add a comment |
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%2f53283932%2ferror-response-is-undefined-if-axios-request-fails%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:
JSON.stringify(error)
Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960
As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
1
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
1
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
add a comment |
This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:
JSON.stringify(error)
Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960
As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
1
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
1
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
add a comment |
This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:
JSON.stringify(error)
Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960
As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
This is an idiosyncrasy of axios. A quick solution to this is to serialize the response:
JSON.stringify(error)
Please refer to this GitHub issue for more info: https://github.com/axios/axios/issues/960
As someone pointed out there, you can check the error status code in the action and run some other commit depending on it.
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
answered Nov 13 '18 at 15:25
SimoneSimone
11.8k95489
11.8k95489
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
1
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
1
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
add a comment |
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
1
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
1
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean adding 'error = JSON.parse(JSON.stringify(error))' into the second lambda?
– Alexey Starinsky
Nov 13 '18 at 15:35
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
Did you mean Vuex action? How does it relate to axios?
– Alexey Starinsky
Nov 13 '18 at 15:40
1
1
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
Check the discussion on GitHub, looks like either axios or vuex (or maybe both) are mangling the error response. The trick (as you pointed out as well) is to JSON.stringify and then JSON.parse the error. Just try that and you should be able to see the actual error response
– Simone
Nov 14 '18 at 9:57
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
I tried 'error = JSON.parse(JSON.stringify(error))' in the interceptor, but with no success.
– Alexey Starinsky
Nov 14 '18 at 11:10
1
1
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
I'm afraid I can't help much further as I'm not familiar with Vuex, but you might be able to find the solution on the GitHub discussion. They labeled it as a non-issue and closed it, but people are still commenting there.
– Simone
Nov 14 '18 at 11:35
add a comment |
The lack of
access-control-allow-origin: *
header in the response caused the browser to block my request.
Adding the header makes axios work fine.
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
add a comment |
The lack of
access-control-allow-origin: *
header in the response caused the browser to block my request.
Adding the header makes axios work fine.
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
add a comment |
The lack of
access-control-allow-origin: *
header in the response caused the browser to block my request.
Adding the header makes axios work fine.
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
The lack of
access-control-allow-origin: *
header in the response caused the browser to block my request.
Adding the header makes axios work fine.
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
answered Nov 27 '18 at 14:47
Alexey StarinskyAlexey Starinsky
53610
53610
add a comment |
add a comment |
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.
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%2f53283932%2ferror-response-is-undefined-if-axios-request-fails%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
