Get returned data after posting with axios (vue+ laravel)

Question

I wanted to create a custom login system with vue as my frontend, laravel handling the api, and axios as the controller between the two. I wanted to get the returned data from my AuthController. Here's my codes:

Vue:

export default {
name: 'Login',
data(){
    return {
        user_input: [
            {email: ''},
            {password: ''}
        ],
        csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    }
},
methods: {
    userLogin: function(){
        let params = Object.assign ({}, this.user_input)
        axios.post('/api/login/', params)
        .then(function(response){
            console.log(response.data)
        })
        .catch(function(error){
            console.log(error)
        })

    }
}
}

And in the AuthController:

public function login(Request $request) {
    return "Hey";
}

The output on the console is this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="40lajOfdWdmIQ1yP49dyeyToidT79CntGyHqrNRD">
<link rel="stylesheet" href="/css/app.css">
<title>VueComplete</title>
</head>
<body>
<div id="app">
    <App/>
</div>
<script src="http://vuecomplete.test/js/app.js"></script>
</body>

(This is basically my app.blade.php view).

why isn't it returning "Hey"?

I also tried:

public function login(Request $request) {
    return $request->email;
}

But it produced the same result. How can I fix this? Thanks a ton!

Update

I am using vue-router to create an SPA within laravel. In my routes (web.php) I have somewhat like this:

Route::get('/{any}', 'SPAController@index')->where('any','.*');

Which then in the controller:

public function index() {
    return view('app');
}

That's probably why it's returning the app.blade.php's entire html code.
Is there a way to access the api/login while still using vue-router's SPA capabilities?

could you also post your route/api.php to show your "/api/login/" actually point to AuthController@login ? — Terry D
– Terry D, Commented Oct 31, 2019 at 16:37
@TerryD I have updated my question. I used a "re-router" in my web.php that always points to the main view (app.blade.php). That's probably why its returning all that html code. Is there a way to access the api/login with this rerouter enabled? — Dran Dev
– Dran Dev, Commented Oct 31, 2019 at 16:41

Salim Djerbouh · Accepted Answer · 2019-10-31 16:50:41Z

1

Exclude api routes from the web route

Route::get('/{any}', 'SPAController@index')->where('any', '^(?!api).*$');

Hope this helps

answered Oct 31, 2019 at 16:50

Salim Djerbouh

11.1k6 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dran Dev Over a year ago

Thanks for this! I managed to solved it using api/login and not /api/login. I guess when laravel sees the / first it would then automatically trigger the redirect function.

Salim Djerbouh Over a year ago

Making requests to a relative url will break in nested routes later on! be careful with that

Dran Dev Over a year ago

Thanks for the heads up!

Dran Dev · Accepted Answer · 2019-10-31 17:00:45Z

0

I solved it. On vue it was supposed to be api/login not /api/login or api/login/ or something.

answered Oct 31, 2019 at 17:00

Dran Dev

5297 silver badges21 bronze badges

Collectives™ on Stack Overflow

Get returned data after posting with axios (vue+ laravel)

Update

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related