使用async/await处理fetch POST请求响应的问题求助

核心问题：mode: 'no-cors'的限制 #

当设置mode: 'no-cors'时，fetch会返回不透明响应（opaque response）——这种响应无法读取response.ok、response.json()等任何属性和方法，你的代码里if (response.ok)永远不会进入分支，后续的await response.json()也会静默失败，导致函数直接退出，既不会触发成功提示，也不会进入catch块抛出错误。

修复步骤 #

1. 移除mode: 'no-cors'配置
   这个配置是跨域请求的“受限模式”，完全阻断了前端对响应内容的读取能力，是导致你无法获取提示的根本原因。

2. 后端配置CORS允许跨域请求
   作为后端开发者，你需要在服务端添加跨域响应头：

   • 本地测试可临时设置：Access-Control-Allow-Origin: *
   • 生产环境需指定具体前端域名：Access-Control-Allow-Origin: https://你的前端域名.com
     同时确保允许POST方法，可添加Access-Control-Allow-Methods: POST

3. 修正请求头与请求体的匹配

   • 如果提交的是JSON字符串（需先用JSON.stringify()处理表单数据），保留Content-Type: application/json；
   • 如果用的是原生FormData对象，不要手动设置Content-Type，浏览器会自动生成正确的multipart/form-data头，否则后端无法解析数据。

修正后的代码示例 #

提交JSON格式数据 #

// 先将表单数据转为JSON字符串
const formData = JSON.stringify({
  // 替换为你的表单字段，比如：
  // name: document.getElementById('nameInput').value,
  // department: document.getElementById('deptSelect').value
});

try {
    const config = {
        headers: { "Content-Type": "application/json" },
        method: "POST",
        body: formData
    };

    const url = "http://localhost:8081/insertEmployeeRequestRecord";
    const response = await fetch(url, config);
    
    if (!response.ok) {
        // 读取后端返回的错误详情（如果有的话）
        const errorText = await response.text();
        throw new Error(`请求失败: ${response.status} - ${errorText}`);
    }
    
    const res = await response.json();
    // 假设后端返回带message字段的JSON，比如{message: "提交成功"}
    document.getElementById("lblAlert").innerHTML = `✅ ${res.message}`;
} catch (error) {
    document.getElementById("lblAlert").innerHTML = `❌ ${error.message}`;
}

提交FormData（含文件或复杂表单） #

const formData = new FormData(document.getElementById('yourFormId'));

try {
    const config = {
        method: "POST",
        body: formData
        // 不要设置Content-Type，浏览器自动处理
    };

    const url = "http://localhost:8081/insertEmployeeRequestRecord";
    const response = await fetch(url, config);
    
    if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`请求失败: ${response.status} - ${errorText}`);
    }
    
    const res = await response.json();
    document.getElementById("lblAlert").innerHTML = `✅ ${res.message}`;
} catch (error) {
    document.getElementById("lblAlert").innerHTML = `❌ ${error.message}`;
}

额外提示 #

• 本地测试时，可通过浏览器开发者工具的「网络」标签，查看请求的状态码、响应内容，确认后端是否正确返回数据；
• 如果后端返回的不是JSON格式，用response.text()代替response.json()，避免解析错误；
• URL后加Math.random()完全没必要——POST请求默认不会被缓存，这个操作无效。

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