Spring Bootで結果が返らない

学習のため、Spring Boot で簡単なAPIを作成しました。

コマンドラインからcurlコマンドでのアクセスは問題なくできるのですが、
ajax や axiosでのアクセスはエラーとなってしまいます。
原因が分かる方、ご教授お願いします。

簡単なSpring Bootサンプル

sampleController.java
package com.demo.sample.controller;

import org.springframework.http.ResponseEntity;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@Validated
@RestController
@RequestMapping("/api/test")
public class sampleController {
    private static final Logger logger = LoggerFactory.getLogger(sampleController.class);

    @RequestMapping(value = "/search", method = RequestMethod.GET)
    public ResponseEntity<String> search() {
	    logger.info("******** TEST　開始 ********");
	    return ResponseEntity.ok("{\"result\":\"0\", \"message\":\"OK\"}");
	}
}

コマンドラインからAPIへのアクセスは問題なく行えます。

terminal
$ curl -i -X GET "http://192.168.124.131:8980/api/test/search"
HTTP/1.1 200 
Content-Type: text/plain;charset=UTF-8
Content-Length: 30
Date: Sat, 14 May 2022 16:25:07 GMT

{"result":"0", "message":"OK"}

ajax や axios などからのアクセスはエラーとなってしまいます。

ajaxでのアクセス

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="p1"></p>
    <p id="p2"></p>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $("#p1").text("");
    $("#p2").text("");
    $.ajax({
      url: "http://192.168.124.131:8980/api/test/search",
      type: "GET",
    })
      .done(function (data1, textStatus, jqXHR) {
        $("#p1").text(jqXHR.status);
        $("#p2").text(JSON.stringify(data1));
      })
      .fail(function (jqXHR, textStatus, errorThrown) {
        $("#p1").text("error");
        $("#p2").text("status:" + jqXHR.status);
      })
      .always(function () {});
  </script>
</html>

ajaxでの結果
イメージ説明

vue.jsを使ったaxiosでのアクセス

sampleView.vue
<template>
  <v-container fluid>
    <v-overlay :value="overlay">
      <v-progress-circular
        indeterminate
        :size="100"
        color="black"
      ></v-progress-circular>
    </v-overlay>
    <v-row>
        <v-col>
            <v-btn @click="clickSub">TEST</v-btn>
        </v-col>
    </v-row>
  </v-container>
</template>
                
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios, { AxiosError } from "axios";

@Component
export default class sampleView extends Vue {
    overlay = false;

    public async clickSub() {
        var url = "http://192.168.124.131:8980/api/test/search";
        
        try {
          const res = await axios.get(url);
          console.log("OK " + res);
          alert("OK")
        } catch (err) {
          console.log("Error " + err);
          alert(err)
        }

    }
}
</script>

<style>

</style>