学習のため、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>
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>
CORS関連かと思われます。おそらくブラウザのdevtools上に何らかのエラーメッセージが出力されていると思いますので、それを確認して追記してください。
回答1件
あなたの回答
tips
プレビュー