手动提交FormData至action方法时出现Invalid MIME type错误求助

1. 先校验请求的Content-Type并捕获解析异常 #

在action方法里先判断请求的Content-Type是否为表单数据格式，同时用try-catch包裹解析逻辑，避免非法格式直接抛出错误：

export const action = (ctx) => async ({ request, params }) => {
  const contentType = request.headers.get('Content-Type');
  // 只处理合法的表单数据类型
  if (!contentType?.includes('multipart/form-data') && !contentType?.includes('application/x-www-form-urlencoded')) {
    return new Response('不支持的请求格式', { status: 400 });
  }

  let formData;
  try {
    formData = Object.fromEntries(await request.formData());
    // 后续业务逻辑
  } catch (err) {
    console.error('解析FormData失败:', err);
    return new Response('表单数据解析错误', { status: 400 });
  }

  return null;
};

2. 避免重复读取请求Body #

request.formData()会一次性消耗请求的Body流，只能调用一次。如果你的请求链路里有中间件、日志逻辑提前读取过Body（比如用了request.text()、request.json()），再调用formData()就会触发错误。

确保整个处理流程只调用一次request.formData()，并缓存解析结果：

export const action = (ctx) => async ({ request, params }) => {
  let formData;
  try {
    // 仅调用一次并缓存
    const rawForm = await request.formData();
    formData = Object.fromEntries(rawForm);
  } catch (err) {
    console.error('解析错误:', err);
    return new Response('数据解析失败', { status: 400 });
  }
  // 后续直接使用缓存的formData
  return null;
};

3. 尝试切换为JSON格式传递数据（可选） #

如果FormData方式稳定性差，可以改用JSON格式传递，减少MIME类型相关问题：

前端代码修改：

const submitData = {
  pathname: window.location.pathname
};
submit(submitData, { 
  action: '/logout', 
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  }
});

Action方法修改：

export const action = (ctx) => async ({ request, params }) => {
  try {
    const formData = await request.json();
    // 后续业务逻辑
  } catch (err) {
    console.error('解析JSON失败:', err);
    return new Response('JSON数据解析错误', { status: 400 });
  }
  return null;
};

4. 检查前端submit的调用时机 #

偶尔报错可能和请求发起时机有关，比如页面即将卸载时触发请求，导致Body传输不完整。可以在调用submit前确认页面处于活跃状态，或者添加防抖逻辑避免重复提交。

内容的提问来源于stack exchange，提问作者D. Rattansingh