Vue.js 3.2.32前端搭配.NET 6后端使用Fetch提交注册表单时，已处理验证消息但Chrome仍记录400错误是否正常？

嘿，这种情况其实是正常的，但咱们可以调整代码让控制台不再出现那个不必要的错误日志～下面详细给你拆解：

为什么会出现400状态码？ #

你的后端使用了[ApiController]特性，ASP.NET Core框架会自动对标记了[Required]的模型字段做验证。当表单字段为空时，模型验证失败，框架会自动返回400 Bad Request响应——这完全符合REST规范，因为客户端提交的请求确实不符合服务器的要求，返回400是正确的行为。

为什么控制台会记录错误？ #

看你的前端代码，当!response.ok时，你执行了return Promise.reject(error)，这会把Promise链标记为"拒绝"状态，进而触发后面的.catch()块，而你在catch里又写了console.log("There was an error!", error)，所以控制台的错误日志其实是你自己的代码打印出来的。

另外，Chrome的网络面板里会显示400的请求记录，这是浏览器的正常行为，它会记录所有非2xx的响应状态，这个是无法消除的（也不需要消除，因为这确实是一个无效请求）。

如何消除控制台的错误日志？ #

既然你已经把后端返回的错误信息展示给用户了，其实不需要再把Promise标记为拒绝状态，直接去掉return Promise.reject(error)即可，这样.catch()块就不会被触发，也就不会打印错误日志了。修改后的前端代码如下：

<script setup>
import { ref } from 'vue'
const user = {
 firstName: "",
 lastName: "",
 displayName: "",
 username: "",
 password: ""
}
const formErrors = ref(null);
const register = () => {
 fetch('https://localhost:7224/account/register', {
 method: 'POST',
 body: JSON.stringify({
 displayName: user.displayName,
 firstName: user.firstName,
 lastName: user.lastName,
 password: user.password,
 username: user.username
 }),
 headers: {
 'content-type':'application/json; charset=UTF-8',
 }
 })
 .then(async response => {
 const data = await response.json();
 if (!response.ok) {
 // 直接处理错误展示，不需要reject Promise
 formErrors.value = data.errors;
 return;
 }
 // 这里可以添加注册成功后的逻辑，比如提示用户
 alert(data.message);
 })
 // 现在这个catch只会捕获网络层面的错误（比如请求失败、跨域等），而不是验证错误
 .catch(error => {
 console.log("网络请求出错了!", error);
 });
}
</script>

额外说明 #

如果你想自定义后端验证错误的返回格式，可以在ASP.NET Core中配置模型验证的响应，比如创建一个自定义的问题详情类，但默认的返回格式已经包含了所有验证错误信息，足够前端使用。

内容的提问来源于stack exchange，提问作者Barnsley