Web网络

Axios

axios传递FormData类型数据参数为空

问题描述

通过axios上传文件，
数据为FormData类型，
但是通过浏览器看到传递的实际参数总是只有一个uuid，
文件内容缺失

解决方法

前端通过axios和FormData实现文件上传功能遇到的坑

这是因为传递FormData类型的数据时，
Content-Type必须要是multipart/form-data，
但是在对axios文件的配置中，
添加了默认头：’application/json;charset=utf-8’，

所以将默认头去掉就行，

如果不加默认头，axios检测到传递数据类型为FormData时，会自动去掉Content-Type，
意思就是叫浏览器去转换这个的意思。

但是低版本的axios就算是加了默认头也会对FormData的Content-Type进行去除操作，
虽然这一步都是在axios/lib/adapters/xhr.js中实现的，
但是不同版本对去除Content-Type的条件不同：

低版本axios：

// 直接判断数据类型
if (utils.isFormData(requestData)) {
  delete requestHeaders['Content-Type']; // Let the browser set it
}

高版本axios：

// 判断是否为FormData
if (utils.isFormData(requestData)) {
  // 是否可以抛给浏览器做
  if (platform.hasStandardBrowserEnv || platform.hasStandardBrowserWebWorkerEnv) {
    requestHeaders.setContentType(false); // Let the browser set it
  } else if ((contentType = requestHeaders.getContentType()) !== false) {
    // fix semicolon duplication issue for ReactNative FormData implementation
    const [type, ...tokens] = contentType ? contentType.split(';').map(token => token.trim()).filter(Boolean) : [];
    requestHeaders.setContentType([type || 'multipart/form-data', ...tokens].join('; '));
  }
}

在高版本的axios中，对axios配置默认头会对浏览器造成干扰，
因此传输的Content-Type没有被正确设置，
需要将默认配置头去除

webChannel

问题描述

浏览器网络监控

网络层日志 net log

chrome net log

参考博客

chrome 地址栏输入:

点击Start Logging to Disk按钮录制net log

录制结束后，在 netlog-viewer 上查看网络日志的具体内容