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

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

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

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

Spring Boot

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

Q&A

解決済

1回答

1038閲覧

Spring Bootで結果が返らない

tanjirou

総合スコア1

Vue.js

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

Spring Boot

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

0グッド

0クリップ

投稿2022/05/14 17:02

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

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

簡単なSpring Bootサンプル

sampleController.java

1package com.demo.sample.controller; 2 3import org.springframework.http.ResponseEntity; 4import org.springframework.validation.annotation.Validated; 5import org.springframework.web.bind.annotation.GetMapping; 6import org.springframework.web.bind.annotation.RequestMapping; 7import org.springframework.web.bind.annotation.RequestMethod; 8import org.springframework.web.bind.annotation.ResponseBody; 9import org.springframework.web.bind.annotation.RestController; 10import org.slf4j.Logger; 11import org.slf4j.LoggerFactory; 12 13@Validated 14@RestController 15@RequestMapping("/api/test") 16public class sampleController { 17 private static final Logger logger = LoggerFactory.getLogger(sampleController.class); 18 19 @RequestMapping(value = "/search", method = RequestMethod.GET) 20 public ResponseEntity<String> search() { 21 logger.info("******** TEST 開始 ********"); 22 return ResponseEntity.ok("{\"result\":\"0\", \"message\":\"OK\"}"); 23 } 24}

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

terminal

1$ curl -i -X GET "http://192.168.124.131:8980/api/test/search" 2HTTP/1.1 200 3Content-Type: text/plain;charset=UTF-8 4Content-Length: 30 5Date: Sat, 14 May 2022 16:25:07 GMT 6 7{"result":"0", "message":"OK"}

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

ajaxでのアクセス

index.html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 <p id="p1"></p> 8 <p id="p2"></p> 9 </body> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11 <script> 12 $("#p1").text(""); 13 $("#p2").text(""); 14 $.ajax({ 15 url: "http://192.168.124.131:8980/api/test/search", 16 type: "GET", 17 }) 18 .done(function (data1, textStatus, jqXHR) { 19 $("#p1").text(jqXHR.status); 20 $("#p2").text(JSON.stringify(data1)); 21 }) 22 .fail(function (jqXHR, textStatus, errorThrown) { 23 $("#p1").text("error"); 24 $("#p2").text("status:" + jqXHR.status); 25 }) 26 .always(function () {}); 27 </script> 28</html>

ajaxでの結果
イメージ説明

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

sampleView.vue

1<template> 2 <v-container fluid> 3 <v-overlay :value="overlay"> 4 <v-progress-circular 5 indeterminate 6 :size="100" 7 color="black" 8 ></v-progress-circular> 9 </v-overlay> 10 <v-row> 11 <v-col> 12 <v-btn @click="clickSub">TEST</v-btn> 13 </v-col> 14 </v-row> 15 </v-container> 16</template> 17 18<script lang="ts"> 19import { Component, Vue } from "vue-property-decorator"; 20import axios, { AxiosError } from "axios"; 21 22@Component 23export default class sampleView extends Vue { 24 overlay = false; 25 26 public async clickSub() { 27 var url = "http://192.168.124.131:8980/api/test/search"; 28 29 try { 30 const res = await axios.get(url); 31 console.log("OK " + res); 32 alert("OK") 33 } catch (err) { 34 console.log("Error " + err); 35 alert(err) 36 } 37 38 } 39} 40</script> 41 42<style> 43 44</style>

axiosでの結果
イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dewa

2022/05/15 05:37 編集

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

回答1

0

ベストアンサー

CORS設定を適切に行う必要があります。

Spring Boot リファレンスの該当説明箇所は次になります。

(暫定対応として、)全リクエストを許可する場合には次のように設定します:

java

1@Configuration(proxyBeanMethods = false) 2public class MyConfiguration { 3 4 @Bean 5 public WebMvcConfigurer corsConfigurer() { 6 return new WebMvcConfigurer() { 7 @Override 8 public void addCorsMappings(final CorsRegistry registry) { 9 registry.addMapping("/**").allowedMethods("*").allowedHeaders("*"); 10 } 11 }; 12 } 13}

投稿2022/05/15 05:45

dewa

総合スコア111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanjirou

2022/05/15 08:11

ありがとうございます! 接続できるようになりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問