postが上手くいきません(Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発)

現在以下のサイトを参考にツイート投稿アプリケーションを作成していますが、formで送信すると以下のエラーが表示されます。
CSRFのところが原因かと思い以下を参考にしてみましたが、解決しません。laravel,vueが初心者なので、アドバイス宜しくお願い致します。リンク内容

参考サイト( Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発)リンク内容

###エラーメッセージ

POST http://localhost:8000/api/tweets 403 (Forbidden)


[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 403"

found in

---> <TweetForm> at resources/js/components/TweetForm.vue
       <Navbar> at resources/js/components/Navbar.vue
         <App> at resources/js/App.vue
           <Root>


Error: Request failed with status code 403
    at createError 
    at settle 
    at XMLHttpRequest.handleLoad

###api.php

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

// 会員登録
Route::post('/register', 'Auth\RegisterController@register')->name('register');
// ログイン
Route::post('/login', 'Auth\LoginController@login')->name('login');
// ログアウト
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
// ログインユーザー
Route::get('/user', function () {
    return Auth::user();
})->name('user');

// tweet投稿
Route::post('/tweets', 'TweetController@create')->name('tweet.create');

###TweetController.php

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StoreTweet;
use App\Tweet;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Storage;

class TweetController extends Controller
{
    public function __construct()
    {
        // 認証が必要
        $this->middleware('auth');
    }
    /**
     * tweet投稿
     * @param StoreTweet $request
     * @return \Illuminate\Http\Response
     */
    public function create(StoreTweet $request)
    {

        $tweet = new Tweet();
        $tweet->user_id = Auth::user()->id;
        $tweet->text = $request->get('text');


        Auth::user()->tweets()->save($tweet);

        // return redirect()->route('tweets.index', [
        //     'id' => $tweet->id,
        // ]);

        // リソースの新規作成なので
        // レスポンスコードは201(CREATED)を返却する
        return response($tweet, 201);
    }
}

###TweetForm.vue

<template>
  <nav v-show="value" class="panel panel-default tweet-form">
    <div class="panel-body">
      <div v-show="loading" class="panel">
        <Loader>Sending your tweet...</Loader>
      </div>
      <form v-show="! loading" class="form" @submit.prevent="create">
        <div class="form-group">
          <textarea class="form__item form-control" rows="5" v-model="text"></textarea>
        </div>
        <p>{{ text }}</p>
        <div class="text-right">
          <button type="submit" class="btn btn-primary">ツイート</button>
        </div>
      </form>
    </div>
  </nav>
</template>

<script>
import Loader from './Loader.vue'

export default {
  components: {
    Loader
  },
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      text: '',
    }
  },
  methods: {
    async create () {
      // ローディング表示
      this.loading = true

      const response = await axios.post('/api/tweets', this.text)
      this.reset()
      this.$emit('textarea', false)

      // ローディングを非表示
      this.loading = false

      this.$router.push(`/tweets/${response.data.id}`)
    } 
  }
}
</script>

###User.php

/**
     * リレーションシップ - tweetsテーブル
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function tweets()
    {
        return $this->hasMany('App\Tweet');
    }

###StoreTweet.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreTweet extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'text' => 'required'
        ];
    }
}

mix-peach

2019/09/11 01:23

>CSRFのところが原因かと思い以下を参考にしてみました・・・こちらは、どんなことを試したのか、具体的に書いていただけますか？それから、\App\Http\Requests\StoreTweet　についても追記をお願いします。

pmo23

2019/09/11 03:19

CSRFの無効でPOSTができるのか試すためにKernel.phpの \App\Http\Middleware\VerifyCsrfToken::class, を削除することを試してみました。 StoreTweet.phpを追加しました。

行動規範の内容に同意します

回答2件

ベストアンサー

403なのでCSRFではなく認証エラーの可能性が高いです。
TweetControllerで$this->middleware('auth');を呼んでいる＝ログイン済のチェックを行なっていますが、認証にはJWTを使用しているのでしょうか。
JWTを使用しているのなら、

リクエスト時にAuthorizationヘッダーを付与しているか
ログイン時に正しくトークンが取得できているか

等確認してみてください。

投稿2019/09/11 04:12

tomoeine

総合スコア129

pmo23

2019/09/11 05:34

JWTは使用していません。認証はこちらを参考にしました。

pmo23

2019/09/11 05:57

https://www.hypertextcandy.com/vue-laravel-tutorial-authentication#%E9%80%A3%E8%BC%89%E8%A8%98%E4%BA%8B%EF%BC%88%E5%85%A816%E5%9B%9E%EF%BC%89

tomoeine

2019/09/11 06:06

であればCookieの問題かと思います。リクエスト時にCookieが正しくセットされているか確認してください。参考ページ通りに実装されているなら、下記の「Axios の設定」で実装しているはずです。 https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3/

pmo23

2019/09/11 06:55

解決しました。ありがとうございます。もしよろしければ次の質問も解凍していただきたいです。宜しくお願い致します。

行動規範の内容に同意します