Laravel + Vue + Axios POST 方法的问题答案

【问题标题】：Laravel + Vue + Axios issue with POST methodLaravel + Vue + Axios POST 方法的问题
【发布时间】：2018-10-31 16:54:14
【问题描述】：

我正在开发一个存储在 VPS 上的 Laravel 5.6 项目（我们称之为“生产”，尽管没有这样的创建环境）。

我们还结合了 Plesk 和 Github，将网络应用从我们的本地环境手动部署到服务器。

问题是当我从 API 加载一些数据时，它们返回错误 405 Method not allowed (GET)...但它们实际上已注册为 在app.js 和routes/api.php 中发布。

最好的是，在我当地的环境中，它们可以完美运行。

这里有一些信息：

服务器：

Ubuntu 服务器 14.04
Apache / MySQL
PHP 7.2.5

我的电脑：

带有 XAMPP 的 Windows 10
Apache / MySQL
PHP 7.2.2

每个浏览器中的开发者工具：

请求方法： GET
状态码： 405 方法不允许

这是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;
    }
},

注意：如果我在开发人员工具中编辑相同的请求并再次发送，但作为 POST 请求，它会返回一切正常，因此 API 在 POST 请求上似乎可以正常工作。 p>

【问题讨论】：

这个答案可能与您的问题有关stackoverflow.com/questions/46611275/…
我找不到那个答案...它解决了我的问题。请回答。谢谢你
@Maramal：如果它在邮递员中工作，那么尝试从请求中删除/。试试看：'/api/properties/countries'，因为我认为它试图找到'/api/properties/countries/'，但它没有在你的路线中定义！
@kozak 请作为答案发帖
@Maramal，NP 很高兴它成功了。

标签： php laravel vue.js axios plesk

【解决方案1】：

尝试删除网址中的尾部斜杠。

比如，

/api/properties/countries

替换原来的 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;
}

【讨论】：

【解决方案2】：

我遇到了这个问题，我通过使用完整的 url 生成计算属性来解决它

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

那么当使用 axios 发帖时

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

【讨论】：