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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

解決済

Spring Bootで結果が返らない

tanjirou
tanjirou

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

1回答

0評価

0クリップ

157閲覧

投稿2022/05/14 17:02

学習のため、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>

axiosでの結果
イメージ説明

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

dewa

2022/05/15 05:37 編集

CORS関連かと思われます。おそらくブラウザのdevtools上に何らかのエラーメッセージが出力されていると思いますので、それを確認して追記してください。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。