码迷,mamicode.com
首页 > 其他好文 > 详细

xhr multipart boundary分隔符

时间:2019-09-11 15:40:43      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:自动   好的   mic   封装   cat   content   分隔符   就是   ima   

首先是http请求常见的3种格式:

  • x-www-form-urlencoded
  • application/json
  • multipart/form-data

x-www-form-urlencoded

  最常见的格式。多用于get请求,数据按照键值对 key1=val1&key2=val2 的方式进行编码。

application/json 

  需要发送json数据时使用,原生xhr不能直接发送object对象,要用JSON.stringify(object)转义成真正的JSON。

multipart/form-data 

  使用此头部发送时浏览器不会对数据进行编码,当需要发送文件时必须使用此头部。

  正常的multipart请求chrome头部信息

  技术图片

  Content-Type里的boundary是分隔符,后台会根据分隔符去获取请求体里的数据

  分隔符开始

  键1:值1
  键2:值2

  分隔符结束  

  这样去获取数据,而boundary就是指定分隔符号的标志。如果没设置,后台会无法定位哪里开始读取数据。

  技术图片

 

  上面这图中,Content-Type未设置boundary

  后台报错:Error: bad content-type header, no multipart boundary 就是这个原因

  大部分封装好的xhr会自己加上boundary,或者不指定头部,也会自动加上。

  如果使用原生xhr,不设置指定头部也会默认加上。

xhr.setRequestHeader(Content-Type,multipart/form-data);

  但是如果设置了指定头部,xhr不会改动头部信息,就会造成以上错误

  只需要注释掉这段代码就好。

//xhr.setRequestHeader(‘Content-Type‘,‘multipart/form-data‘);

 

 

  工作中遇到的坑,记录一下

 

xhr multipart boundary分隔符

标签:自动   好的   mic   封装   cat   content   分隔符   就是   ima   

原文地址:https://www.cnblogs.com/ksyy/p/11506361.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!