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

Question

我正在学习 Vue+Laravel 教程，它使用 Axios 对 Vue 组件脚本中这些行的 Ajax 请求。控制台日志中导致我悲伤的错误是：

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

我的网站位于 wamp 本地的不同文件夹中，这看起来像是问题所在。我不能使用正常的 laravel "Url(' ') 辅助函数来获取路由目录。那么我将如何在 javascript 中执行此操作，而只是将我的本地主机站点硬编码在这不利于将来推送到真实服务器。谢谢！

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

组件挂载时创建一个新的axios实例：

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

您甚至可以继续将基本 uri 存储在数据属性中：

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

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

然后您可以在以后的方法中使用 this.axios。请参阅 the docs 以供参考。

干杯！

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

How to set root directory to fix 404 POST in javascript for Axios + Vue Component + Laravel

javascript

php

laravel

vue.js

axios