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请求无效。控制台检查器中的错误显示：

获取http://localhost/tweets 404（未找到）

未捕获（承诺）错误：请求失败，状态码为404      在createError（app.js：13931）      在定居（app.js：35401）      在XMLHttpRequest.handleLoad（app.js：13805）

GET https://stats.pusher.com/timeline/v2/jsonp/1session=Njg3NjQyNDY5NT....MjY1fV0%3D 0（）   POST http://localhost/broadcasting/auth 404（未找到）

当我尝试发布POST时：

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

获取/发布应该朝这个方向发展：

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

希望这有帮助

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

1 个答案: