使用 Pusher 和 Vue.js 在 laravel 聊天中获取和 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 (Not Found)

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

GET https://stats.pusher.com/timeline/v2/jsonp/1session=Njg3NjQyNDY5NT....MjY1fV0%3D 0 () POST http://localhost/broadcasting/auth 404 (Not Found)

当我尝试制作 POST 时：

POST http://localhost/tweets 404 (Not Found)

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

删除 URL 或

之前的 /

保存一个

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

希望对您有所帮助

使用 Pusher 和 Vue.js 在 laravel 聊天中获取和 POST 问题

GET and POST issue in laravel chat using Pusher and Vue.js

php

laravel

pusher

vue.js

axios