laravelのajax通信でcsrfが記述されているのに419errorが発生する

前提・実現したいこと

laravel7でsummernoteエディターの画像をサーバーにファイル形式で保存するシステムを作っています。
（参考https://biz.addisteria.com/laravel-imagefile-realtime/）
そこで419errorが発生しました。

発生している問題・エラーメッセージ

POST http://127.0.0.1:8000/posts/temp 419 (unknown status)

該当のソースコード

views/posts/summernote.php

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>

<script>
    jQuery(document).ready(function($) {
    $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100,
 
  
     callbacks: {
      onImageUpload : function(files, editor, welEditable) {
         for(var i = files.length - 1; i >= 0; i--) {
                 sendFile(files[i], this);
          }
      }
     } 
 });
 
  function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file', file);
    
    $.ajax({
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
      data: form_data,
      type: "POST",
      contentType: 'multipart/form-data',
      // 画像保存用のルート設定
      url: 'temp',
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) {
        $(el).summernote('editor.insertImage', url);
      }
    });
  }
});
</script>
  </body>
</html>

試したこと

419errorはcsrfが記述されていない時に起こるエラーとのことですが、ソースコードにはしっかりとcsrfが記述されていて特に問題はないように感じています。
原因がどこにあるか分からないで困っているので、次やるべきことを教えて頂けると幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

summernote.phpをsummernote.blade.phpに変更して、コードを以下のように変更(layouts/app.blade.phpと連結しただけ)したら正常に動作しました。エラーの原因は結局よく分からないので分かる方いたら教えてください????‍♂️
summernote.blade.php

summernote.blade.php
1@extends('layouts.app')
2@section('title', 'create page')
3@section('postContent')
4<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
5<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
6
7<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
8<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
9    
10<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
11<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
12 
13<div id="summernote"></div>
14
15<script>
16    jQuery(document).ready(function($) {
17    $('#summernote').summernote({
18        placeholder: 'Hello Bootstrap 4',
19        tabsize: 2,
20        height: 100,
21 
22  
23     callbacks: {
24      onImageUpload : function(files, editor, welEditable) {
25         for(var i = files.length - 1; i >= 0; i--) {
26                 sendFile(files[i], this);
27          }
28      }
29     } 
30 });
31 
32  function sendFile(file, el) {
33    var form_data = new FormData();
34    form_data.append('file', file);
35    
36    $.ajax({
37      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
38      data: form_data,
39      type: "POST",
40      contentType: 'multipart/form-data',
41      // 画像保存用のルート設定
42      url: 'temp',
43      cache: false,
44      contentType: false,
45      processData: false,
46      success: function(url) {
47        $(el).summernote('editor.insertImage', url);
48      }
49    });
50  }
51});
52</script>
53  
54@endsection

layouts/app.blade.php

app.blade.php
1<!doctype html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- CSRF Token -->
9    <meta name="csrf-token" content="{{ csrf_token() }}">
10
11    <title>App掲示板 - @yield('title')@yield('kensaku') </title>
12    <!-- Scripts -->
13    <script src="{{ asset('js/app.js') }}" defer></script>
14    <script src="https://code.jquery.com/jquery-3.5.1.js"
15        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
16
17    <!-- Fonts -->
18    <link rel="dns-prefetch" href="//fonts.gstatic.com">
19    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
20
21    <!-- Styles -->
22    
23    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
24    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
25</head>
26
27<body>
28
29    <div id="app">
30        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
31            <div class="container">
32                <a class="navbar-brand" href="{{ url('/') }}">
33                    釣り掲示板 
34                    
35                </a>
36                
37                <button class="navbar-toggler" type="button" data-toggle="collapse"
38                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
39                    aria-label="{{ __('Toggle navigation') }}">
40                    <span class="navbar-toggler-icon"></span>
41                </button>
42               <div> 
43               @yield('kensaku')
44               </div>
45                
46                <div class="collapse navbar-collapse" id="navbarSupportedContent">
47                    <!-- Left Side Of Navbar -->
48                    <ul class="navbar-nav mr-auto">
49                        @auth
50                        <a href="/posts/create" class="btn btn-outline-primary">新規投稿</a>
51                        @endauth
52                    </ul>
53
54                    <!-- Right Side Of Navbar -->
55                    <ul class="navbar-nav ml-auto">
56                        <!-- Authentication Links -->
57                        @guest
58                        <li class="nav-item">
59                            <a class="nav-link" href="{{ route('login') }}">{{ __('ログイン') }}</a>
60                        </li>
61                        @if (Route::has('register'))
62                        <li class="nav-item">
63                            <a class="nav-link" href="{{ route('register') }}">{{ __('新規登録') }}</a>
64                        </li>
65                        @endif
66                        @else
67                        <li class="nav-item dropdown">
68                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
69                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
70                                {{ Auth::user()->name }} <span class="caret"></span>
71                            </a>
72
73                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
74                                <a class="dropdown-item" href="{{ route('home') }}">
75                                    {{ __('Home') }}
76                                </a>
77                                <a class="dropdown-item" href="{{ route('user.index') }}">
78                                    {{ __('UserInformation') }}
79                                </a>
80                                <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
81                                                     document.getElementById('logout-form').submit();">
82                                    {{ __('Logout') }}
83                                </a>
84
85                                <form id="logout-form" action="{{ route('logout') }}" method="POST"
86                                    style="display: none;">
87                                    @csrf
88                                </form>
89                            </div>
90                        </li>
91                        @endguest
92                    </ul>
93                </div>
94                
95            </div>
96        </nav>
97        
98        
99
100        <main id="mainpart" class="py-4">
101        
102            @yield('content')
103        
104        </main>
105    </div>
106    @include('layouts.app_script')
107</body>
108
109</html>
110@yield('postContent')
111

投稿2021/01/20 01:44

takuyaKK

総合スコア37

ベストアンサー

resources/js/bootstrap.js に以下を追記し、コンパイルしてください。

js
1$.ajaxSetup({
2    headers: {
3        'X-CSRF-TOKEN': $('[name=csrf-token]').prop('content')
4    }
5});

投稿2021/01/19 14:16

phper.k

総合スコア3923

takuyaKK

2021/01/20 00:44

コンパイルしましたが、特に変化は起こりませんでした．．．

phper.k

2021/01/20 00:56 編集

そんなわけねぇ… 正しい方法、手段で行っていないだけだろうよ。

takuyaKK

2021/01/20 01:45

なんかよく分からないんですけど自己解決しました！お忙しい中回答して頂きありがとうございます????‍♂️

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

laravelのajax通信でcsrfが記述されているのに419errorが発生する

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

関連した質問