首页 > 解决方案 > 使用 Pusher 和 Vue.js 在 Laravel 聊天中出现错误 500 Axios POST 请求

问题描述

我在本教程中使用 Pusher 和 Vue.js 在 Laravel 中实现简单聊天时遇到问题:链接教程

我提出请求的 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', tweet).then(response => {
      console.log(response.data);
    });
}
}
});

我的 web.php 路线:

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

我的控制器是这个:

public function __construct()
{
    $this->middleware('auth');
}

public function index()
{
    return view('chat');
}

public function showTweets(){
    return Tweet::with('user')->get();
}

public function sendTweet(Request $request){
    $user = Auth::user();

     $tweet = $user->tweets()->create([
        'tweet' => $request->input('tweet')
     ]);
    broadcast(new TweetSentEvent($user, $tweet))->toOthers();

    //return ['status' => 'Tweet Sent!'];

}

当我运行应用程序并尝试通过单击我的发送按钮的 POST 请求发送推文时,此错误出现在控制台上:

POST http://localhost/youChat/public/tweets 500 (Internal Server Error)

Uncaught (in promise) Error: Request failed with status code 500
at createError (app.js:13931)
at settle (app.js:35401)
at XMLHttpRequest.handleLoad (app.js:13805)

一切似乎都很好......有什么帮助吗?提前致谢!!

标签: phplaravelvue.jsaxiospusher

解决方案


推荐阅读