서버로 데이터 전송

 

• v-model로 input 값과 Vue 상태를 연결
• @submit.prevent로 페이지 새로고침 방지
• axios.post()로 서버로 데이터 전송

import axios from 'axios';
import { ref } from 'vue';


const submitForm = async () => { ... }

<form @submit.prevent="submitForm">

 

@CrossOrigin(origins = "http://localhost:5173")  혹은 config

import org.springframework.context.annotation.Bean;
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 {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:5173")
                        .allowedMethods("*"); // GET, POST 등 모두 허용
            }
        };
    }
}

 

Spring Boot에서 @RequestBody를 붙여서 JSON으로 받는지 확인하세요:

 

• 만약 @RequestBody가 없으면 formData를 JSON으로 보낼 때 매핑이 안 됩니다.
• Content-Type: application/json 으로 전송되므로 @RequestBody 필수입니다.