Remix 1.15中useSubmit钩子自定义请求头不生效问题

问题原因 #

Remix的useSubmit钩子是为模拟HTML表单提交设计的，HTML原生表单不支持application/json类型的请求，因此当你手动设置Content-Type: application/json时，Remix会自动覆盖该请求头，改用表单默认的编码格式（如multipart/form-data或application/x-www-form-urlencoded），导致自定义头不生效。而Postman测试正常是因为它直接发送原始HTTP请求，没有这个自动处理逻辑。

解决方案 #

方案1：改用FormData提交（适配useSubmit的设计） #

将数据封装为FormData，符合useSubmit的表单提交逻辑，无需手动设置Content-Type：

提交代码修改为：

const formData = new FormData();
formData.append("some", "values");
submit(formData, {
  method: "post",
  action: "/dashboard/",
});

对应的action函数调整为：

export async function action({ request }) {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  console.log('接收的数据:', data); // { some: "values" }
  return "uhuu";
}

方案2：直接使用fetch API发送JSON请求 #

如果必须发送application/json格式的请求，绕过useSubmit，直接使用原生fetch：

fetch("/dashboard/", {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ some: "values" }),
})
.then(response => response.text())
.then(result => {
  console.log('响应结果:', result);
  // 可根据需要添加后续逻辑，比如页面跳转或状态更新
});

原action函数无需修改，依然可以用await request.json()解析数据。

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