JSON Forms表单提交时fetch POST报Unhandled Rejection (TypeError)如何解决？

最可能原因：CORS跨域限制 #

• 浏览器同源策略要求协议、域名、端口三者完全一致才允许直接发送请求，你的React前端默认运行在http://localhost:3000，后端服务端口为8080，属于跨域场景。
• curl请求不受同源策略限制，所以可以正常调用，而浏览器发送跨域POST请求前会先发送OPTIONS预检请求，若后端未配置CORS放行规则，预检请求不通过，浏览器会直接拦截实际POST请求，导致后端无日志、前端报Failed to fetch错误。
• 解决方法：在后端服务配置CORS规则，放行前端地址的跨域请求。以Spring Boot为例，可在对应控制器类/方法上添加@CrossOrigin(origins = "http://localhost:3000")注解，也可配置全局CORS过滤器实现开发环境全放行。

次要原因：fetch请求缺少配置与错误处理 #

你当前的fetch写法没有显式指定跨域模式，也没有添加错误捕获逻辑，会触发Unhandled Rejection报错，可按如下方式修改sendData函数：

const sendData = async () => {
  try {
    const response = await fetch('http://localhost:8080/message', {
      method: 'POST',
      mode: 'cors', // 显式指定跨域请求模式
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    // 可根据业务需求处理响应结果
    console.log('提交成功：', await response.json());
  } catch (error) {
    console.error('提交失败：', error);
  }
}

其他排查方向 #

• 确认前端运行协议与后端一致，若前端使用HTTPS启动，请求HTTP的后端接口会被浏览器的混合内容策略拦截。
• 检查浏览器控制台的网络标签，查看OPTIONS请求的响应状态与返回头，确认CORS配置是否生效。

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