提交表单try…catch 捕获异常如果校验失败前台页面会有错误提示。constsubmitFormasync(){try{awaitformRef.value.validate();// 校验失败会抛出异常constsubmitData{...formData};submitData.allowedSubmitTypessubmitData.allowedSubmitTypes.join(,);if(isEdit.value){awaitupdateTask(currentTaskId.value,submitData);ElMessage.success(更新成功);}else{awaitcreateTask(submitData);ElMessage.success(创建成功);}dialogVisible.valuefalse;taskStore.fetchTasks();}catch(error){// 如果是校验失败error 中包含具体信息也可以给一个通用提示ElMessage.error(error?.message||保存失败请检查表单填写是否正确);}};在 createTask / updateTask 的底层 axios 请求中也统一处理错误将后端返回的错误信息抛出来。constcreateTaskasync(data){try{constresponseawaitaxios.post(/api/tasks,data);returnresponse.data;}catch(error){console.error(Create task error:,error);// 将错误抛给上层处理以便显示提示thrownewError(error.response?.data?.message||error.message||网络错误);}};如果后端返回的业务错误不在 HTTP 状态码体现需要手动从 response 中读取错误信息并 throw new Error()。【错误一】前台页面展示“Network Error”问题分析a. 后端服务是否正常运行访问后端健康检查接口http://localhost:8080/actuator/health 正常返回b. 前端 API 基础地址正确配置方式一 不使用代理直接请求完整 URLaxios 的 baseURL的设置配置环境变量 .env.developmentVITE_API_BASE_URLhttp://localhost:8080/api前端代码中使用 axios.defaults.baseURL import.meta.env.VITE_API_BASE_URL或者直接配置// 常见配置axios.defaults.baseURLhttp://localhost:8080;该地址与后端实际运行的地址和端口一致。否则会产生跨域问题。同时后端添加 CORS 配置ConfigurationpublicclassCorsConfig{BeanpublicWebMvcConfigurercorsConfigurer(){returnnewWebMvcConfigurer(){OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**).allowedOrigins(http://localhost:5173)// 前端开发服务器地址.allowedMethods(*).allowedHeaders(*).allowCredentials(true);}};}}方式二使用 Vite在 vite.config.js 中配置代理exportdefault{server:{proxy:{/api:{target:http://localhost:8080,changeOrigin:true,rewrite:(path)path.replace(/^\/api/,/api)// 保持路径}}}}总结方式一、方式二如果两者同时存在且不一致可能导致请求重复路径。当前选择使用Vite代理。维护统一的baseUrl采用以下组合前端baseURL: ‘/api’后端server.servlet.context-path: /apiControllerRequestMapping(“/tasks”)这样实际请求路径前端 /api/tasks → 代理到后端 http://localhost:8080/api/tasks → 匹配 context-path/api 和 RequestMapping(“/tasks”)前端统一设置 baseURL 在 axios 封装文件utils/request.js中设置 baseURL// request.jsimportaxiosfromaxios;constrequestaxios.create({baseURL:/api,// 所有请求自动加上 /api 前缀timeout:15000,});exportdefaultrequest;后端统一设置上下文路径配置文件 application.propertiesserver.servlet.context-path/api