如何在Axios + Vue Component + Laravel中设置根目录以修复javascript中的404 POST

Question

I'm following a tutorial to learn Vue+Laravel and it uses Axios for the Ajax request on these lines in the script for the Vue Component. The error causing me grief is on the console log is:

    POST http://localhost/favorite/2 404 (Not Found)

my website lives locally on wamp at a different folder which looks like the issue. I can't use the normal laravel "Url(' ') helper function to get the route directory. So how would I do this in javascript rather just hardcoding my local host site in which isn't good for pushing to a real server in the future. Thanks!

http://localhost/laravel/public/

        methods: {
        favorite(post) {
            axios.post('/favorite/'+post)
                .then(response => this.isFavorited = true)
                .catch(response => console.log(response.data));
        },

        unFavorite(post) {
            axios.post('/unfavorite/'+post)
                .then(response => this.isFavorited = false)
                .catch(response => console.log(response.data));
        }
    }

Answer 1

Create a new axios instance when the component is mounted:

mounted() {
    this.axios = axios.create({
        baseURL: 'http://localhost',
    });
}

You could even go ahead an store the base uri in a data attribute:

data() {
    baseUri: 'http://localhost',
},

mounted() {
    this.axios = axios.create({
        baseURL: this.baseUri,
    });
}

Then later in your methods you can make use of this.axios . See the docs for reference.

Cheers!