Netlify+Heroku部署项目 移动端浏览器表单数据无法提交至数据库

• 前端应用部署于Netlify平台，后端服务部署于Heroku平台
• 桌面端PC访问站点时，表单数据可正常提交至数据库，全功能运行正常
• 移动端Chrome、iPhone自带Safari等浏览器执行相同提交操作时，数据无法成功发送到后端
• 先后尝试axios、fetch两种请求方案，问题仅在移动端出现，桌面端所有浏览器复现正常

前端请求实现 #

axios版本 #

await axios.post(
"https://tea-website-backend.herokuapp.com/api/v1/contact-form",
{
  name,
  email,
  msg,
}
);

fetch版本 #

await fetch(
  "https://tea-website-backend.herokuapp.com/api/v1/contact-form",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      name,
      email,
      msg,
    }),
  }
)

后端路由配置（app.js） #

app.use("/api/v1/contact-form", submitFormRouter);

后端控制器逻辑 #

const Contact = require("../models/Contact");
const { StatusCodes } = require("http-status-codes");

const submitForm = async (req, res) => {
  const { name, email, message } = req.body;
  const contactForm = await Contact.create({ ...req.body });
  res.status(StatusCodes.OK).json("Successful");
};

module.exports = {
  submitForm,
};

按优先级从高到低排序

• 第一优先级：真机调试获取明确报错
  不要盲目猜测问题根源，先通过真机调试定位错误类型：

  1. 安卓端：手机开启开发者模式，USB连接电脑，打开电脑端Chrome访问chrome://inspect即可调试移动端页面，查看Network面板中对应请求的状态、报错信息
  2. iOS端：手机开启Safari网页检查器，连接Mac后打开电脑端Safari开发菜单，即可调试移动端页面的网络请求
     根据报错类型对应处理即可：CORS报错修跨域配置、超时错误修服务休眠问题、SSL错误修证书配置、4xx错误修请求参数问题。

• 第二优先级：修复CORS跨域配置兼容问题
  桌面端浏览器对CORS的校验宽松度高于移动端，泛域名跨域配置、缺失预检请求响应头的配置在桌面端可能正常工作，但会被移动端浏览器拦截：

  1. 后端安装cors依赖，在所有路由配置之前挂载CORS中间件，不要用无配置的全量放行写法，明确指定允许的前端源：

  const cors = require('cors');
  // 放在app.use(express.json())之后，路由配置之前
  app.use(cors({
    origin: "替换为你的Netlify前端正式域名",
    credentials: true,
    allowedHeaders: ["Content-Type"]
  }))
  

  2. 检查自定义中间件是否存在拦截移动端UA、拦截OPTIONS预检请求的逻辑，确保OPTIONS请求直接返回200状态码。

• 第三优先级：解决Heroku免费实例冷启动超时问题
  Heroku免费层实例30分钟无访问会进入休眠状态，冷启动耗时通常在3-10秒，而移动端浏览器默认请求超时时间普遍短于桌面端（多为5秒左右），桌面端网络环境稳定可能刚好等待冷启动完成，移动端网络波动+超时阈值低就会直接中断请求：

  1. 前端请求配置15秒以上的超时时间，同时加提交加载态提示用户等待
  2. 增加1次请求失败自动重试的逻辑，覆盖冷启动场景
  3. 长期方案可升级Heroku付费实例，或更换无休眠机制的后端托管平台。

• 第四优先级：排查HTTPS证书与混合内容问题

  1. 确认Netlify前端站点已强制开启HTTPS，没有HTTP降级访问的情况
  2. 用手机浏览器直接访问后端接口地址https://tea-website-backend.herokuapp.com/api/v1/contact-form，如果弹出安全风险提示，说明Heroku默认SSL证书在你测试的移动端系统版本上信任链校验不通过，可给后端绑定自定义域名，配置独立的SSL证书解决。

• 低优先级：修复字段不匹配与错误捕获缺失问题

  1. 当前前端提交的字段为msg，后端控制器解构时取的是message，字段名不匹配，虽然该问题会同时影响桌面端，但建议统一字段名，避免后续加参数校验时直接拦截请求
  2. 控制器当前没有加try/catch错误捕获，数据库写入、参数校验出错时前端无法拿到明确的错误信息，建议补充错误捕获逻辑，返回明确的错误码和提示，方便后续排查问题。

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