Laravel + Vue + Axios issue with POST method

Question

I am working on a Laravel 5.6 project which is stored on a VPS (we call it "production", despite there is no such created environment).

We also combined Plesk & Github to deploy the web app from our local environments to the server manually.

The issue is when I load some data from the APIs they return error 405 Method not allowed (GET)... but they actually are registered as POST in the app.js and in routes/api.php.

And the best thing is that in my local environment they work perfectly.

Here some information:

The server:

• Ubuntu Server 14.04
• Apache / MySQL
• PHP 7.2.5

My computer:

• Windows 10 with XAMPP
• Apache / MySQL
• PHP 7.2.2

The Developer tool in every browser:

Request Method: GET
Status Code: 405 Method Not Allowed

And here is the code within the app.js:

loadCountries: function loadCountries(total) {
    axios.post('/api/properties/countries/').then(function (response) {
        app.countries = response.data;
    });

    total = total <= this.countries.length ? total : this.countries.length;

    if (total) {
        var newArr = [];
        for (i = 0; i < total; i++) {
            newArr.push(this.countries[i]);
        }
        this.countries = newArr;
    }
},

Note: If I edit the same request in the developer tool and send it again but as a POST request it returns me everything ok, so the API seems to work fine on POST request.

Answer 1

Try to remove the trailing slash in your url.

Such as,

/api/properties/countries

Replacing that line in your original app.js would yeild this,

loadCountries: function loadCountries(total) {
axios.post('/api/properties/countries').then(function (response) {
    app.countries = response.data;
});

total = total <= this.countries.length ? total : this.countries.length;

if (total) {
    var newArr = [];
    for (i = 0; i < total; i++) {
        newArr.push(this.countries[i]);
    }
    this.countries = newArr;
}

},