React 활용 - 4 : axios 사용하여 Spring에 데이터 전송하기

reactBootTemplate/src/main/java/com/reactboot/template/WebConfig.java

@@ -0,0 +1,20 @@
+package com.reactboot.template;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class WebConfig implements WebMvcConfigurer {
+	/**
+	 * 개발 환경에서의 크로스 도메인 이슈를 해결하기 위한 코드로
+	 * 운영 환경에 배포할 경우에는 15~18행을 주석 처리합니다.
+	 * 
+	 * ※크로스 도메인 이슈: 브라우저에서 다른 도메인으로 URL 요청을 하는 경우 나타나는 보안문제
+	 */
+	@Override
+	public void addCorsMappings(CorsRegistry registry) {
+		registry.addMapping("/**").allowedOrigins("*")
+        .allowedMethods("GET", "POST");
+	}
+}

reactBootTemplate/src/main/java/com/reactboot/template/controller/TestController.java

@@ -0,0 +1,34 @@
+package com.reactboot.template.controller;
+
+import java.sql.SQLException;
+import java.util.HashMap;
+import java.util.Map;
+
+import javax.servlet.http.HttpServletRequest;
+import org.springframework.web.bind.annotation.RequestBody;
+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;
+
+
+@RestController
+@RequestMapping("/test")
+public class TestController {
+
+	/**
+	 * @param requestMap
+	 * @return Map<String, Object>
+	 * @throws SQLException
+	 * @description Axios test
+	 */
+	@ResponseBody
+	@RequestMapping(value="AxiosTest.do", method=RequestMethod.POST)
+	public  Map<String,Object> AxiosTest (HttpServletRequest request,@RequestBody Map<String, Object> paramMap) throws SQLException  {
+		System.out.println("paramMap ==>"+ paramMap);
+		Map<String,Object> resultMap = new HashMap<String,Object>();
+		resultMap.put("java return", "im java");
+		return resultMap;
+	}
+
+}

reactBootTemplate/src/webapp/reactspringfront/src/Screens/TextData.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios'; 
 
 function TextData() {
   const [data1, setData1] = useState('');
@@ -10,6 +11,19 @@ function TextData() {
   function Send(){
     console.log(data1)
     console.log(data2)
+    axios(
+        {
+          url: '/test/AxiosTest.do',
+          method: 'post',
+          data: {
+            data1:data1,data2:data2
+          } , 
+          baseURL: 'http://localhost:8080',
+          //withCredentials: true,
+        }
+      ).then(function (response) {
+        console.log(response.data);
+      });
   }
     return (
         <div>