使用 Pusher 和 Vue.js 在 laravel 聊天中的 GET 和 POST 问题

Question

我在按照本教程使用 Pusher 和 Vue.js 在 Laravel 中实现简单聊天时遇到问题：link tutorial。

首先，我在导航栏中的路线是这条：

http://localhost/youChat/public/

我的 web.php 文件包含以下路径：

Auth::routes();
Route::get('/', 'TweetController@index');
Route::get('tweets', 'TweetController@showTweets')->middleware('auth');
Route::post('tweets', 'TweetController@sentTweet')->middleware('auth');

我在 assets/js 中提出请求的 app.js 文件是这个：

const app = new Vue({
el: '#app',

data: {
    tweets: []
},
created() {
    this.showTweets();
    Echo.private('chat')
        .listen('TweetSentEvent', (e) => {
        this.tweets.push({
            tweet: e.tweet.tweet,
            user: e.user
 });
 });
 },
methods: {
    showTweets() {
        axios.get('/tweets').then(response => {
            this.tweets = response.data;
        });
    },
     addTweet(tweet) {
        this.tweets.push(tweet);

        axios.post('/tweets', qs.stringify(tweet)).then(response => {
          console.log(response.data);
        });
    }
}
});

如您所见，我使用 Axios 发送请求。

一切看起来都很好，但是 GET 和 POST 请求不起作用。控制台检查器中的错误显示如下：

GET http://localhost/tweets 404（未找到）

未捕获（承诺中）错误：请求失败，状态码为 404 在 createError (app.js:13931) 结算时 (app.js:35401) 在 XMLHttpRequest.handleLoad (app.js:13805)

获取https://stats.pusher.com/timeline/v2/jsonp/1session=Njg3NjQyNDY5NT....MjY1fV0%3D0() 发布http://localhost/broadcasting/auth 404（未找到）

当我尝试发帖时：

POST http://localhost/tweets 404（未找到）

get/post 应该朝着这个方向：

http://localhost/youChat/public/tweets

但我不知道发生了什么。有什么建议吗？我绝望了：D。 提前致谢！

Answer 1

您收到此错误是因为您使用的是绝对路径。

因此，您可以将 Base url 存储在变量中，也可以使用相对路径

这是一个例子。

methods: {
    showTweets() {
        axios.get('tweets').then(response => {
            this.tweets = response.data;
        });
    },
     addTweet(tweet) {
        this.tweets.push(tweet);

        axios.post('tweets', qs.stringify(tweet)).then(response => {
          console.log(response.data);
        });
    }
}

删除网址前的/ 或

保存一个

const URL = '{{url('/')}}'

methods: {
    showTweets() {
        axios.get(URL + '/tweets').then(response => {
            this.tweets = response.data;
        });
    },
     addTweet(tweet) {
        this.tweets.push(tweet);

        axios.post(URL + '/tweets', qs.stringify(tweet)).then(response => {
          console.log(response.data);
        });
    }
}

希望对你有帮助