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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 108

pmo23

score 7

現在以下のサイトを参考にツイート投稿アプリケーションを作成していますが、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'
        ];
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mix-peach

    2019/09/11 10:23

    >CSRFのところが原因かと思い以下を参考にしてみました・・・
    こちらは、どんなことを試したのか、具体的に書いていただけますか?

    それから、\App\Http\Requests\StoreTweet についても追記をお願いします。

    キャンセル

  • pmo23

    2019/09/11 12:19

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

    StoreTweet.phpを追加しました。

    キャンセル

回答 2

checkベストアンサー

0

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

  • リクエスト時にAuthorizationヘッダーを付与しているか
  • ログイン時に正しくトークンが取得できているか
    等確認してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/11 14:34

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

    キャンセル

  • キャンセル

  • 2019/09/11 15:06

    であればCookieの問題かと思います。
    リクエスト時にCookieが正しくセットされているか確認してください。

    参考ページ通りに実装されているなら、下記の「Axios の設定」で実装しているはずです。
    https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3/

    キャンセル

  • 2019/09/11 15:55

    解決しました。
    ありがとうございます。

    もしよろしければ次の質問も解凍していただきたいです。
    宜しくお願い致します。

    キャンセル

0

CSRFが原因の場合はHTTPステータスは419なはずです
403の場合は、認証エラーです

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • postが上手くいきません(Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発)