fetch - multipart/form-data POST 中缺少边界

IT技术 javascript xmlhttprequest fetch form-data fetch-api
2021-03-14 03:17:47

感谢您的光临。

我想送new FormData()的body一个的POST使用请求提取API

操作看起来像这样

var formData = new FormData()
formData.append('myfile', file, 'someFileName.csv')

fetch('https://api.myapp.com', 
  {
    method: 'POST',
    headers: {
      "Content-Type": "multipart/form-data"
    },
    body: formData
  }
)

这里的问题是边界，就像

boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

永远不会进入Content-Type:标题

它应该是这样的

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

当您尝试使用“相同”操作时new XMLHttpRequest()，就像这样

var request = new XMLHttpRequest()
request.open("POST", "https://api.mything.com")
request.withCredentials = true
request.send(formData)

标题设置正确

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu

所以我的问题是

  1. 在这种情况下，我如何使fetch行为完全一样XMLHttpRequest？

  2. 如果这是不可能的，为什么？

谢谢大家！这个社区或多或少是我取得职业成功的原因。

6个回答

该问题的解决方案是显式设置Content-Type为，undefined以便您的浏览器或您使用的任何客户端可以设置它并为您添加该边界值。令人失望但真实。

难以置信的！！我花了几个小时才找到这个！！delete result.headers['Content-Type'];为我工作，谢谢！！
2021-04-20 03:17:47
既没有将内容类型设置为未定义，也没有在使用 fetch 进行 POST 之前删除内容类型对我来说......
2021-04-23 03:17:47
@Crysfel 谢谢.. 删除内容类型对我有用：P
2021-05-01 03:17:47
对我不起作用。设置为 undefined 默认为 text/plain。
2021-05-04 03:17:47
使用 fetch，我删除了 Content-Type 标头并且它起作用了。
2021-05-08 03:17:47

我删除了“内容类型”并将“接受”添加到 http 标头中，它对我有用。这是我使用的标题，

'headers': new HttpHeaders({
        // 'Content-Type': undefined,
        'Accept': '*/*',
        'Authorization': 
        "Bearer "+(JSON.parse(sessionStorage.getItem('token')).token),
        'Access-Control-Allow-Origin': this.apiURL,
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'origin,X-Requested-With,content-type,accept',
        'Access-Control-Allow-Credentials': 'true' 

      })
没有其他解决方案对我有用。添加 Accept: / header 后，一切都像魅力一样。
2021-05-10 03:17:47 
fetch(url,options)
  1. 如果将字符串设置为options.body，则必须设置Content-Typein 请求标头，否则将text/plain默认设置。

  2. 如果 options.body 是特定对象，例如let a = new FormData()或let b = new URLSearchParams()，则不必Content-Type手动设置。它将自动添加。

    • 因为a，它会是这样的

    multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

    如您所见，边界是自动添加的。

    • 对于b，它是application/x-www-form-urlencoded;
你的解释更有意义，谢谢！我设法让我的代码工作！
2021-04-26 03:17:47
很好，你告诉我们这boundary是自动添加的。我们以前都知道。
2021-05-13 03:17:47

我遇到了同样的问题，并且能够通过排除Content-Type属性来修复它，允许浏览器自动检测和设置边界和内容类型。

您的代码变为：

var formData = new FormData()
formData.append('myfile', file, 'someFileName.csv')

fetch('https://api.myapp.com',
  {
    method: 'POST',
    body: formData
  }
)

我正在使用aurelia-api（aurelia-fetch-client 的包装器）。在这种情况下，Content-Type 默认为“application/json”。所以我将 Content-Type 设置为 undefined，它就像一个魅力。

其它你可能感兴趣的问题
上一篇如何在单击使用 jQuery 的特定链接时打开引导程序导航选项卡的特定选项卡？ 下一篇JavaScript setInterval() 方法会导致内存泄漏吗？