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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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における攻撃手法です。

解決済

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

pmo23
pmo23

総合スコア0

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における攻撃手法です。

2回答

-1評価

2クリップ

68閲覧

投稿2019/09/10 16:26

編集2022/01/12 10:58

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

mix-peach
mix-peach

2019/09/11 01:23

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

2019/09/11 03:19

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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における攻撃手法です。