GET и POST проблема в чате Laravel с использованием Pusher и Vue.js - PullRequest
Новая
       7

GET и POST проблема в чате Laravel с использованием Pusher и Vue.js

0 голосов
/ 05 мая 2018

У меня возникла проблема после этого урока по реализации простого чата в Laravel с использованием Pusher и Vue.js: ссылка урока .

Прежде всего, мой маршрут в навигационной панели следующий:

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

Вот мой файл app.js в assets / 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 (не найдено)

Uncaught (в обещании) Ошибка: запрос не выполнен с кодом состояния 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 (не найдено)

Команда get / post должна идти в этом направлении:

http://localhost/youChat/public/tweets

но я не знаю, что происходит. Любое предложение? Я в отчаянии: D. Заранее спасибо!

1 Ответ

0 голосов
/ 05 мая 2018

Вы получаете эту ошибку, потому что используете абсолютный путь.

Таким образом, вы можете сохранить базовый 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);
        });
    }
}

Надеюсь, это поможет

...