The GET method is not supported for this route. Supported methods: POST.

前提・実現したいこと

動的なセレクトボックスを実現したいです。
一つ前の質問で丁寧に答えてくださった方のおかげでここまで辿り着いきましたが、エラーの解消法がわからないため質問させていただきます。ルーティングの設定について検討しましたが、上手くいきませんでした。

処理の流れ
1.「科目」セレクトボックスにて値を選択
2.値が変更された際に、Ajaxの処理($.ajaxの部分)によってコントローラへ値を送信
3.コントローラ内へ送信された値を元に、該当する「課題」の値を取得し、JSに返却
4.JSにて「課題」セレクトボックスに、該当する値を追加

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

The GET method is not supported for this route. Supported methods: POST.

該当のソースコード

progressblade
1@extends('layouts.app')
2@section('content')
3
4<div class="row justify-content-center ml-0 mr-0 h-100">
5    <div class="card w-100">
6        <div class="card-header">進捗状況登録</div>
7
8        <div class="card-body">
9            <form method='POST' action="/store2">
10
11                 @csrf
12                <input type='hidden' name='user_id' value="{{ $user['id'] }}">      
13　　<div class="form-group row”>
14                    <label for="memo">科目</label> 
15
16                        <select name='tagname' id="tagname"　type="select" class="form-control"  >
17           @foreach($tags as $tag)
18           <option value="{{ $tag['tagname']}}">{{ $tag['tagname']}}</option>
19           @endforeach
20            </select> 
21           <div>
22           <div class="form-group row”>
23                  <label for="memo">課題</label> 
24　　　　　　　　　　 <select name='content' id="memo" type="select" class="form-control"  >
25          @foreach($memos as $memo)
26           <option value="{{ $memo['content']}}">{{ $memo['content']}}</option>
27          @endforeach
28           </select> 
29            <div class="text-center">
30              <button type='submit' class="btn btn-danger btn-lg">登録する</button>
31    　　　</div>
32        </form>
33     </div>
34    </div>
35</div>
36@endsection
37
38@push('scripts')
39<script src="{{ asset('/js/progress.js') }}"　type="module"></script>
40@endpush

progressjs
1$(function() {
2// 「科目」のセレクトボックスが変更された場合
3$('#tagname').on('change', function() {
4  // value属性の値を取得
5  let tag_name_val = $(this).val();
6  // tag_name_valをHomeControllerへ渡す
7  $.ajax({
8    headers: {
9      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
10    },
11    type: "POST",
12    url: "/addContent",
13    dataType: "JSON",
14    data: {
15      val: tag_name_val
16    }
17  })
18  .done(function(data) {
19    $.each(data['memos'], function(index, value) {
20      // コントローラ側で取得した課題のデータをセレクトボックスに追加する
21      $('#memo').append($('<option>').val(value.id).text(value.name));
22    })
23  })
24.fail(function(jqXHR, textStatus, errorThrown){
25    console.log(jqXHR);
26    console.log(textStatus);
27    console.log(errorThrown);
28    });
29
30})
31})

appblade
1layoutsのapp.blade.php
2<!doctype html>
3<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <body bgcolor="black" text="white">
8    <!-- CSRF Token -->
9    <meta name="csrf-token" content="{{ csrf_token() }}">
10
11    <title>{{ config('app.name', 'SimpleNote') }}</title>
12
13    <!-- Scripts -->
14
15    <script src="{{ asset('js/app.js') }}" defer></script> 
16    @yield('js') 
17
18    <!-- Fonts -->
19    <link rel="dns-prefetch" href="//fonts.gstatic.com">
20    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
21    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
22
23    <!-- Styles -->
24
25    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
26    <link href="{{ asset('css/utility.css') }}" rel="stylesheet">
27    @yield('css')
28
29
30
31<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
32    {{-- <script src="{{ asset('js/progress.js') }}" defer></script> --}}
33    @stack('scripts')
34
35
36
37</head>
38<body>
39    <div id="app">　　　　
40        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
41            <div class="container">
42                <a class="navbar-brand" href="{{ url('/') }}">
43                    {{ config('app.name', 'Laravel') }}
44                </a>
45                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
46                    <span class="navbar-toggler-icon"></span>
47                </button>
48
49                <div class="collapse navbar-collapse" id="navbarSupportedContent">
50                    <!-- Left Side Of Navbar -->
51                    <ul class="navbar-nav mr-auto">
52
53                    </ul>
54
55                    <!-- Right Side Of Navbar -->
56                    <ul class="navbar-nav ml-auto">
57                        <!-- Authentication Links -->
58                        @guest
59                            <li class="nav-item">
60                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
61                            </li>
62                            @if (Route::has('register'))
63                                <li class="nav-item">
64                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
65                                </li>
66                            @endif
67                        @else
68                            <li class="nav-item dropdown">
69                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" 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('logout') }}"
75                                       onclick="event.preventDefault();
76                                                     document.getElementById('logout-form').submit();">
77                                        {{ __('ログアウト') }}
78                                    </a>
79
80                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
81                                        @csrf
82                                    </form>
83                                </div>
84                            </li>
85                        @endguest
86                    </ul>
87                </div>
88            </div>
89        </nav>
90
91        <main class="main">
92        @if(session('success'))
93            <div class="alert alert-success" role="alert">
94              {{ session('success') }}
95            </div>
96        @endif
97
98        <div class="card" style="width: 18rem;">
99            <ul class="list-group list-group-flush">
100              <li class="list-group-item">
101                <a href="{{ url('/mypage') }}"> マイページ </a>
102              </li>
103              <li class="list-group-item">
104                <a href="{{ url('/add') }}"> 科目登録 </a>
105              </li>
106              <li class="list-group-item">
107                  <a href="{{ url('/create') }}"> 課題作成 </a></li>
108              <li class="list-group-item">
109                  <a href="{{ url('/progress') }}"> 進捗状況登録 </a></li>
110            </ul>
111          </div>
112        </div>
113<p></p>
114          <div class="card" style="width: 18rem;">
115            <div class="card w-100 ">
116                <div class="card-header">科目一覧</div>
117            <p></p>
118                <a href="{{ url('/kadai') }}"> 科目名(課題詳細) </a></li>
119                @foreach($tags as $tag)
120
121                <a href="/?tag={{ $tag['tagname'] }}" class='d-block'>{{ $tag['tagname'] }}</a>
122      @endforeach
123
124                <div class="card-body ">
125                </div>  
126                </div>
127            </div>
128        </div>
129
130
131
132                </div>
133              </div>    
134            </div> <!-- col-md-3 -->
135
136             <div style="position:absolute; top:80px; left:300px;'> 
137            <div class="col-md-8">
138
139              @yield('content')
140            </div>
141            </div>
142        </div>
143        </div>
144          </div> <!-- row justify-content-center -->
145        </div>
146        </main>
147    </div>
148    @yield('footer')
149</body>
150</html>

Webphp
1 Route::get('/progress', 'HomeController@progress')->name('progress');
2 Route::post('/addContent', 'HomeController@addContent')->name('addContent');

controller
1 public function addContent(Request $request)
2{
3  $tagNameVal = $request->input('val');
4  $memos = Memo::where('tag_id', $tagNameVal)->get();
5
6  return [
7    'memos' => $memos,
8  ];
9}
10    
11}

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

ご教授よろしくお願いいたします。

https://teratail.com/questions/375190
ここから引用させていただきました。

skys215

2021/12/27 02:40

エラーは開発者ツールのnetworkパネルに表示されたのでしょうか？

ria_ria

2021/12/27 02:50

お返事ありがとうございます。 networkパネルのRequest URLからいきました。

FKM

2021/12/27 05:40

addContentコントローラの中身はどうなってますか？

ria_ria

2021/12/27 05:45

お返事ありがとうございます。情報不足で申し訳ありません。コントローラを追記しました。よろしくお願いいたします。

FKM

2021/12/27 06:12

AjaxのタイプをGETにした場合、どんな挙動しますか？

ria_ria

2021/12/27 06:42

jquery-1.12.1.min.js:4 GET http://127.0.0.1:8000/addContent?val=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0I(3) 405 (Method Not Allowed) send @ jquery-1.12.1.min.js:4 ajax @ jquery-1.12.1.min.js:4 (anonymous) @ progress.js:7 dispatch @ jquery-1.12.1.min.js:3 r.handle @ jquery-1.12.1.min.js:3 progress.js:25 このようなエラーが出ます。

skys215

2021/12/27 07:31

routes/web.phpには、addContentは一つしかないのですか？他のPOSTのラウトをうまく挙動しますか？それともaddContentだけですか？他のPOSTもうまく挙動しない場合、apache/nginxサーバーのrewrite設定の問題だと思います。

FKM

2021/12/27 07:42

さっきのところをPOSTに戻してからルート設定に以下の文章を書き足すとどうなりますか？ Route::get('/addContent', 'HomeController@addContent')->name('addContent');

ria_ria

2021/12/27 09:01

addContent以外もあり、他のPOSTは上手く動いています。また、Route::get('/addContent', 'HomeController@addContent')->name('addContent');を書き足すし /addContentのアドレスを打つと、{"memos":[]}が表示されます、、

FKM

2021/12/27 09:18

解決したということでしょうか？自分はなぜこれで解決できるのかはわからないので、もっとLaravelに詳しい有識者の意見を募りたいところですね。

ria_ria

2021/12/27 09:24

解決してないです（ ; ; ）

skys215

2021/12/27 13:38

$.post()ではどうですか？

ria_ria

2021/12/27 14:11

お返事ありがとうございます。 $.post()はどこを変更すれ良いのでしょうか、、

skys215

2021/12/27 15:57

$.ajax()の代わりに$.post()を使ってみてください。

ria_ria

2021/12/28 01:10

ありがとうございます。できなかったです、、、 $.each(data['memos'], function(index, value) { // コントローラ側で取得した課題のデータをセレクトボックスに追加する $('#memo').append($('<option>').val(value.id).text(value.name)); }) ここの前で、 $('#memo option').remove();を追加すると一度消えるので、接続はできているようです。

skys215

2021/12/28 01:48

「できなかった」とは？ jQuery.post({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, type: "POST", url: "/addContent", dataType: "JSON", data: { val: tag_name_val } }) で試してみてください。

ria_ria

2021/12/28 02:08

ありがとうございます。何も変わらなかったという意味でした、、、こちらも変化なしでした。

FKM

2021/12/28 04:02

jQueryのバージョンが古い（1.12）ので、$.postが対応していないのでは？あと、対応しているとしても$.postの場合はtype指定不要ですね。

skys215

2021/12/28 05:05

jQuery.postと$.postは引数の数と意味が違います。ドキュメントを詳しく読んでから書き直しましょう。

ria_ria

2021/12/28 09:07

ありがとうございます。ドキュメントをしっかり読みます。