質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSRF

クロスサイトリクエストフォージェリ (Cross site request forgeries、CSRF)は、 外部Webページから、HTTPリクエストによって、 Webサイトの機能の一部が実行されてしまうWWWにおける攻撃手法です。

Q&A

解決済

2回答

1684閲覧

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

pmo23

総合スコア14

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSRF

クロスサイトリクエストフォージェリ (Cross site request forgeries、CSRF)は、 外部Webページから、HTTPリクエストによって、 Webサイトの機能の一部が実行されてしまうWWWにおける攻撃手法です。

0グッド

2クリップ

投稿2019/09/10 16:26

編集2019/09/11 03:16

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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を追加しました。
guest

回答2

0

ベストアンサー

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

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

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

投稿2019/09/11 04:12

tomoeine

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pmo23

2019/09/11 05:34

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

2019/09/11 06:55

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

0

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

投稿2019/09/11 04:03

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問