Axios returns HTML response (Laravel +VUE)

Question

I have two Route in my api.php.

Route::get('resume-list/{templateID}', 'BasicController@getAllResumes');
Route::get('resume/single/{id}', 'BasicController@getResume');

The first one works fine but the second route returns the html code of index page.

Below is the axios call for the route:

data() {
    return {
        id: this.$route.params.id,
        data: {}
    };
},
methods: {
    loadData() {
        axios.get("api/resume/single/" + this.id).then(response => {
            console.log(response);
            this.data = response;
        });
    }
},

created() {
    this.loadData();
}

Function on backend

public function getResume($id)
{
    return Basic::where('id', $id)->firstOrFail();
}

What is the cause for this code?

Bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

$response = Basic::findOrFail($id); return response()->json($response); simply do this and check — Akhtar Munir
– Akhtar Munir, Commented Jun 19, 2020 at 7:03
Yes, the first route is also called by axios and it works perfectly. — psudo
– psudo, Commented Jun 19, 2020 at 7:21
Maybe this a typo, but the url in your api call is api/single/resume/ but laravel route is resume/single/{id}: one is single/resume the other is resume/single — user3532758
– user3532758, Commented Jun 19, 2020 at 7:56
@PawanRai can you share a screenshot of this HTML response since it could be an error response? Akhthar Munir is asking for bootstrap code as well. I think a screenshot or the code could save a lot of time. — user3532758
– user3532758, Commented Jun 19, 2020 at 8:02

Akhtar Munir · Accepted Answer · 2020-06-19 08:30:28Z

2

Make your setting in this way

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte');
} catch (e) {}


window.axios = require('axios');
//window.axios.defaults.baseURL = process.env.APP_URL;
window.axios.defaults.baseURL = 'http://localhost:8000';

window.axios.defaults.headers.common = {
   'X-Requested-With': 'XMLHttpRequest',
   'Content-Type':'application/json',
   'Accept':'application/json'
   };


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Now your axios call will become

loadData() {
    axios.get(`/api/resume/single/${this.$route.params.id}`).then(response => {
        console.log(response);
    });
}

OR

"/api/resume/single/"+this.id

answered Jun 19, 2020 at 8:30

Akhtar Munir

1,7693 gold badges13 silver badges29 bronze badges

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

2 Comments

psudo Over a year ago

Thanks it is working now. What was wrong with my configs ??

Akhtar Munir Over a year ago

welcome, you were not hitting the url correclty, that's why, I have configured a baseUrl in your global axios setting and also application/json these things were missing.

Denys Biliaiev · Accepted Answer · 2020-06-19 07:40:20Z

2

try to convert manual - https://laravel.com/docs/5.1/responses#json-responses

if it doesn't work, the problem is configuring the router

answered Jun 19, 2020 at 7:40

Denys Biliaiev

211 bronze badge

4 Comments

Akhtar Munir Over a year ago

It should be a comment not an answer.

psudo Over a year ago

I think the route is not reaching to the controller method as I did dd($id) it still returns HTML code while it should have returned it in the network tab of devtool.

Akhtar Munir Over a year ago

Is your vuejs a seperate project or it's included inside laravel ? @PawanRai

psudo Over a year ago

It is inside laravel

Collectives™ on Stack Overflow

Axios returns HTML response (Laravel +VUE)

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related