@author Ken @time 2020-09-25 21:23:26 @description 转载请备注出处，谢谢

bug 回忆录（二）

大家好，我是 Ken，人贱人爱的前端小 Ken，我的公众号是 前端小Ken，今天我要告诉你一个严重的问题，我发现这个奇怪的 bug，内心一万个草泥马在空中飘过，顿时心里害怕，菊花一紧：

最后我还是怂了，不得不好好认真的对待 bug。

接着昨天的猜测继续往下探索：

昨天在末尾，我们猜测可能使用 POST 请求就可能会解决那个警告:

Resource interpreted as Document but transferred with MIME type applic。。。

步骤如下：

通过拿到后端返回的下载 id
再一次使用 POST 方式请求

具体代码如下：

XM.ajax.post(this.url, params).then(res => {
  // 其中 res.data.data 就是后端返回的 id
  console.log(res.data.data)
  // 我们需要在这里处理到处的功能
  // 拼接下载压缩包链接
  let downloadUrl = this.$_getEnv('xdeploy').baseUrl + this.downloadUrl + res.data.data
  this.downFile(downloadUrl);
}).catch(err => {
  this.$message.error(err.msg)
  console.error(err)
})

// vue 语法
methods: {
  downFile(downloadUrl) {
    this.download('xdeploy', downloadUrl).then(res => {
      
    }).catch(err => {
      this.$message.error(err.msg)
      this.$_consoleUtil.err(err)
    })
  },
  download(modelName, url, data, param) {
    axios({
      method: 'POST',
      url,
      data,
      param
    }).then(res => {
      // 处理下载过程代码
    }).catch(err => {
      
    })
  }
}

这次真的下载成功了，并且完美解决警告问题：

这次我们特别注意到，在响应头里面看到有以下这句：

Content-Disposition: attachment; filename="xxx.zip"

这下我们得好好研究下这个玩意，有到了我们装逼的时候了

作为消息主体中的消息头

在HTTP场景中，第一个参数或者是inline（默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示），或者是attachment（意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框，将filename的值预填为下载后的文件名，假如它存在的话）。

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

所述Content-Disposition 的 header 在 MIME 消息的电子邮件的更大的范围内定义的，但仅可能的参数的子集应用于 HTTP 形式和 POST 请求。只有值 form-data，以及可选的指令 name 和 filename，可以在 HTTP 上下文中使用。

所以，用 POST 方式请求是正确的方式。