next.js Remix 1上useSubmit钩子上定义标题时出现问题,15

bweufnob  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(96)

我使用useSubmit钩子发送POST请求,但似乎没有考虑我定义的头。
以下是我的提交:

submit('/dashboard/', {
     method: 'post',
     headers: {
        'Content-Type': 'application/json',
     },
     body: JSON.stringify({ some: "values" }),
  });

下面是我的action function:

export async function action({ request }) {
  console.log('request: ', request);
  const data = await request.json();
  return "uhuu";
}

这里是在动作函数上接收到的请求的日志。在标头上观察内容类型

注意到它不是我定义的

submit('/dashboard/', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },

我正在从localhost:3000运行
使用Postman它工作得很好,问题是当我尝试在代码上使用useSubmit时,头部的"Content-Type"正确地更改为'Content-Type': 'application/json'

lokaqttq

lokaqttq1#

目前,所有的Remix数据突变API:useSubmitfetcher.submit等将始终以application/x-www-form-urlencoded发送数据。这就是浏览器如何形成POST。
但是,有一个活动的PR允许您覆盖此行为,并允许您指定编码类型。
https://github.com/remix-run/react-router/discussions/10324
同时,一般的“解决方案”是指定单个FormData值并将JSON值字符串化。

submit({json: JSON.stringify(obj)}, { method: 'POST' })

// action
const formData = await request.formData()
const data = JSON.parse(formData.get('json'))

相关问题