Can't access laravel response from ajax library - ajax

// Edit: Hm...this is an firebug bug in firefox. On chrome it works...
I'm using Laravel 5.3 with Vue 2.0 and the axios ajax library.
Here is a test controller, where i return a response from laravel:
public function testMethod() {
return response('this is an error', 500);
}
Here is my ajax call:
http(`fetch-data`).then(response => {
const data = response.data;
console.log(data);
}).catch(error => {
console.log(error); // <- This doens't work, he show my nothing
alert(error);
});
The problem is, i need the error message which is returned from laravel into my client catch. But if i console.log them, he show me nothing. If i alert the error, he gives me the following message: Error: Request failed with status code 500.
Why can't i access something like error.statusCode, error.statusMessage?

Try
return response()->json('this is an error', 500);

Related

Unable to access returned error response in Axios from Laravel Lumen API

I've got a Laravel Lumen 7 RESTful API alongside a Nuxt JS front-end with Axios. My front-end makes Axios calls to the API and inside of my Lumen project I'm of course returning relevant responses and error codes. However, it appears that these responses although I can see them when I inspect the network and can see it in the preview/response tabs, I'm unable to access it from Axios in my catch() block...
If I change it to a 200 response then I can access it from my then() block but this isn't ideal.
Lumen response
return response()->json(['success' => false, 'message' => 'We\'re unable to add this domain right now, please try again shortly'], 500);
JS Axios function
/*
** Add domain
*/
addDomain () {
// add new domain
this.$axios.post(`${process.env.API_URL}/api/domains/add`, this.domainCreation).then(res => {
console.log(res)
}).catch(err => {
console.log(err) // doesn't display my Object from laravel, instead just the native error string: "Error: Request failed with status code 500"
})
}
Can anyone help?
try this err.response catch error data is inside response
this.$axios.post(`${process.env.API_URL}/api/domains/add`, this.domainCreation).then(res => {
console.log(res)
}).catch(err => {
console.log(err.response);
})
ref link https://github.com/axios/axios#handling-errors
In addition to the above answer, you should consider returning the correct response codes.
5xx error codes are for Internal Server Errors. You are probably looking to return a 422 unprocessable entity error.
More info about 500 status code: https://httpstatuses.com/500
More info about 422 status code: https://httpstatuses.com/422

Where to add axios interceptors code in vue js

I am using vue js as frontend with laravel. I am using laravel passport for auth, now i wants to show some error message once received 401 unauthentic error message that mostly occurs when my token expired. so to do this i am using axios interceptors my code is like
axios.interceptors.response.use(function (response) {
return response
}, function (error) {
// const { config, response: { status } } = error
const { config, response } = error
const originalRequest = config
if (response && response.status === 401) {
//notication or redirection
this.$vs.notify({
title: 'Error',
text: response.data['message'],
iconPack: 'feather',
icon: 'icon-check-circle',
color: 'danger'
})
}
return Promise.reject(error)
})
Now Question is that where i put this code in vue js so that it call after every request & so an error message shown & redirect to login once get 401 unauthorized..
Any Suggestion from anyone.
Thanks in advance!!
app.js or add them to separate file and include in app.js. There is post about this https://medium.com/#yaob/how-to-globally-use-axios-instance-and-interceptors-e28f351bb794

How to fix 'TypeError: this.isCallback is not a function' error for UserAgentApplication in msal.js

using Msal v1.0.2, loginPopup is not working from iFrame.
trying to get the UserAgentApplication instance using client_id. its throwing an exception:
TypeError: this.isCallback is not a function
at Object.UserAgentApplication (UserAgentApplication.ts:228)
const myMSALObj = Msal.UserAgentApplication(msalConfig);
myMSALObj.loginPopup(["user.read"]).then(function (loginResponse) {
return myMSALObj.acquireTokenSilent(accessTokenRequest);
}).then(function (accessTokenResponse) {
const token = accessTokenResponse.accessToken;
}).catch(function (error) {
//handle error
});
sample from . 'Quickstart for MSAL JS' works fine but when I try to integrate Msal inside iFrame of my JavaScript plugin code, its not working.
working code from sample:
var myMSALObj = new Msal.UserAgentApplication(msalConfig);
myMSALObj.handleRedirectCallback(authRedirectCallBack);
myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
acquireTokenPopupAndCallMSGraph();
}).catch(function (error) {
//Please check the console for errors
console.log(error);
});
there was a typo causing this exception: TypeError: this.isCallback is not a function at Object.UserAgentApplication (UserAgentApplication.ts:228)
fix: const myMSALObj = new Msal.UserAgentApplication(msalConfig);
That should solve this exception issue.

TypeError: Cannot read property 'status' of undefined when receiving errors from Laravel validation

I'm trying to validate a form via AJAX using Axios with vue.
axios.post('api/registro', this.sede)
.then(response => {
this.$emit('cerrar')
})
.catch(err => {
console.log(err)
})
The error comes from the catch part, as it's coming from a Laravel validator. The response from the server is 422 and it contains a JSON with a message and the errors the server is sending.
Everything works fine if I dont try to log the error.
The problem was coming from me using interceptors in axios, I wasn't returning the errors in the interceptors properly, so nothing was coming into the catch function.
This is what I had:
axios.interceptors.response.use(null, function (error) {
// some logic
});
And this is how it should've been:
axios.interceptors.response.use(null, function (error) {
// some logic
return Promise.reject(error);
});
Thank you all so much for your help.
You can just check for errors like so:
if(err.response.data.errors){
this.errors = err.response.data.errors;
}
this.errors would be an array you can loop through using v-for to display it

status: 405, statusText: "Method Not Allowed", in axios .post laravel

i am trying to do axios.post method for sending the messages . But i am getting this error repeatedly.
my script looks like this
sendMsg(){
if(this.msgFrom){
axios.post('messages/sendMessage/',{
conID:this.conID,
msg:this.msgFrom
})
.then(response => {
console.log('saved successfully');
})
.catch(function (error) {
console.log(error.response);
});
}
}
Route looks like this
Route::post('/messages/sendMessage','Messages#sendmsg');
and controller looks like this
public function sendmsg(Request $request){
echo $request->msg;
}
and i am getting the error code 405,method not allowed , any solutions please.
I am going to make an assumption:
Your route is currently in the default api.php file
So you may need to modify your URL in the axios request to include the /api/:
/api/messages/sendMessage

Resources