Spring Boot + Vue の非同期通信で405エラーになる

前提・実現したいこと

プログラミング初学者です。Spring Boot と Vueで、検索結果をaxiosの非同期通信で返す機能を作成しています。

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

axiosでpostメソッドを実行する時だけ405エラーとなってしまいます。

Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: 
Request method 'POST' not supported]

試したこと

web上で原因を調べ、axiosのpostメソッド時にcsrfトークンが入っていないことが原因と考えました。現在作成中のアプリではSpring Securityを使用しており、CSRF対策が有効になっているためです。

htmlにformタグ<form th:action="@{/api/search}">を追加し、vueのコンポーネントを削除してpostしたところ、jsonが返ってくることを確認しました。

Controllerクラスが正しくレスポンスしたことを確認したあと、htmlのmeta属性からcsrfトークンの値を取得してaxiosのヘッダーに追加してpostしましたが、変わらず405エラーとなりました。

axiosのヘッダーにcsrfトークンを設定する方法をご教示いただければと思います。
フロント側でなくControllerクラスに問題がある場合もご指摘いただけますと幸いです。

該当のソースコード

PostIndex.html
<!DOCTYPE HTML>
<html xmlns:th="https://thymeleaf.org">
<head>
  <title>投稿一覧</title>
  <meta charset="UTF-8">
   <meta name="_csrf" th:content="${_csrf.token}"/>
   <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<h1>投稿一覧</h1>
<div id="testApp">
	<div>
	    <select id="category" name="category" v-model="category">
            <option th:each="list:${lists}" 
                    th:value="${list.postId}" th:text="${list.postName}"></option>
        </select>
        <select id="status" name="status" v-model="status">
	        <option th:each="status:${statusList}" 
	                th:value="${status.statusId}" th:text="${status.statusName}"></option>
	    </select>
	    <input type="text" id="keyword" name="keyword" v-model="keyword">
	    <button v-on:click="search">検索</button>
	</div>
    <table>
	    <tr v-for="(value,key) in PostRecords">
	      <td> {{value.nickName}} </td>
	      <td> {{value.content}} </td>
	      <td> {{value.createAt}} </td>
	    </tr>
	</table>
</div>
<script th:src="@{/testApp.js}"></script>
</body>
</html>

testApp.js
var testApp = {
	data(){
		return{
			category:[],
			status:[],
			keyword:"",
			PostRecords:[]
		}
	},
	methods: {
		getAll(){
			axios.get('/api/search')
			.then(response => {
				this.PostRecords = response.data
			})
			.catch(error =>{
				console.log(error)
			})
		},
		search(){
			var tokenValue = document.head.querySelector("[name=_csrf]").content;
			var headerName = document.head.querySelector("[name=_csrf_header]").content;
	        var header={
            		'token': tokenValue,
		            'headerName':headerName
	           }
			let params = new FormData()
            params.append('category', this.category)
            params.append('status',this.status)
            params.append('keyword',this.keyword)
            
			axios.post('/api/search',params,{header:header})
			     .then(response => {
				this.PostRecords = response.data
			})
			.catch(error =>{
				console.log(error)
			})
		}
	},
	mounted(){
		this.getAll()
	}
}
Vue.createApp(testApp).mount('#testApp');

Controllerクラス
@Controller
public class PostController {
	
	private final PostService postService;
	
	public PostController(PostService postService) {
		this.postService = postService;
	}
	
	@GetMapping("/index/post")
	String showPostIndex(Model model) {
		model.addAttribute("lists", PostCategory.values());
		model.addAttribute("statusList", StatusList.values());
		return "Post/PostIndex";
	}

}

RestControllerクラス
@RestController
public class RestPostRecordController {
	
	private final PostService postService;
	
	public RestPostRecordController(PostService postService) {
		this.postService = postService;
	}
	
	@RequestMapping(value = "/api/search",method= {RequestMethod.GET,RequestMethod.POST},
			        produces = "application/json; charset=utf-8")
    @ResponseBody
	public String getSearchPostRecord(@RequestParam(value="category",required=false) int[]category,
    		                          @RequestParam(value="status",required=false) int[]status,
    		                          @RequestParam(value="keyword",required=false) String text)
    		                        		  throws JsonProcessingException{
		String jsonMsg = null;
        List<PostRecord>records =  postService.searchPostRecord(category,status,text);
		
		ObjectMapper mapper = new ObjectMapper();
        jsonMsg =  mapper.writerWithDefaultPrettyPrinter().writeValueAsString(records);
        
        return jsonMsg;
	}

}

Configクラス
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled=true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
	
	private final SuccessHandler successHandler;
	
	private final AccountUserDetailsService accountUserDetailsService;
	
	private final PasswordEncoder passwordEncoder;
	
	public WebSecurityConfig(SuccessHandler successHandler,
			                 AccountUserDetailsService accountUserDetailsService,
			                 PasswordEncoder passwordEncoder) {
		this.successHandler = successHandler;
		this.accountUserDetailsService = accountUserDetailsService;
		this.passwordEncoder = passwordEncoder;
	}
	
	@Override //全体に対するセキュリティ設定を行う
    public void configure(WebSecurity web) throws Exception {
		web.ignoring().antMatchers("/resources/**");
    }

    @Override //URLごとに異なるセキュリティ設定を行う
    protected void configure(HttpSecurity http) throws Exception {
    	http.formLogin()
    	    .loginPage("/login")
    	    .loginProcessingUrl("/authenticate")
    	    .usernameParameter("username")
    	    .passwordParameter("password")
    	    .successHandler(successHandler)
    	    .failureUrl("/login?error")
    	    .permitAll();
    	http.logout()
    	    .logoutUrl("/logout")
    	    .logoutSuccessUrl("/login?logout")
    	    .permitAll();
    	http.authorizeRequests()// アクセス権限の設定
    	    .antMatchers("/registration","/regist").permitAll()
		    .antMatchers("/resetpassword","/updatePassword").permitAll()
    	    .antMatchers("/admin/**").hasAuthority("ROLE_ADMIN")
            .antMatchers("/index/**").hasAuthority("ROLE_USER")
            .anyRequest().authenticated()
            .and()
            .exceptionHandling().accessDeniedPage("/accessdenied");
    }

    @Override //認証方法の実装の設定を行う
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    	auth.userDetailsService(accountUserDetailsService).passwordEncoder(passwordEncoder);
    }

}