CODEWITHSUNDEEP
phplaravelvue.jsaxiosplesk
Maramal
Maramal

Reputation: 3474

Laravel + Vue + Axios issue with POST method

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:

My computer:

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.

Upvotes: 7

Views: 3771

Answers (2)

Ahmed Hdeawy
Ahmed Hdeawy

Reputation: 84

i faced this issue and i solve it by make computed attribute with full url like that

computed: {
    sendAnswersUrl: function () {
        return window.location.protocol + "//" + window.location.hostname, +  "/api/properties/countries";
     }
  }

then when post using axios

axios.post(this.sendAnswersUrl, {
          group: this.id,
        })
        .then(data => {})
        .catch(() => {});

Upvotes: 0

Ryan Kozak
Ryan Kozak

Reputation: 1141

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;
}

},

Upvotes: 4

Related Questions