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.

This answer may be relevant to your issue stackoverflow.com/questions/46611275/… — Ryan Kozak
– Ryan Kozak, Commented May 22, 2018 at 2:38
I couldn't find that answer... It solved my issue. Please answer. and Thank you — Maramal
– Maramal, Commented May 22, 2018 at 2:51
@Maramal: If it's working in postman then try to remove / from request. Try it like: '/api/properties/countries' because i think it's tried to find '/api/properties/countries/' and it's not defined in your routes! — Hiren Gohel
– Hiren Gohel, Commented May 22, 2018 at 5:13

Ryan Kozak · Accepted Answer · 2018-05-22 17:10:10Z

4

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

},

answered May 22, 2018 at 17:10

Ryan Kozak

1,1416 gold badges16 silver badges22 bronze badges

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

Comments

Ahmed Hdeawy · Accepted Answer · 2020-05-28 21:34:22Z

0

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(() => {});

answered May 28, 2020 at 21:34

Ahmed Hdeawy

944 bronze badges

Collectives™ on Stack Overflow

Laravel + Vue + Axios issue with POST method

Here some information:

The server:

My computer:

The Developer tool in every browser:

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Here some information:

The server:

My computer:

The Developer tool in every browser:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related