Vue 项目实战上传文件与接口OPTIONS

在项目的开发过程当中不免会遇到许多的坑，寻找答案成为了相当重要的一步，职场中解决问题的能力是必要切重要的，有些问题网上给的答案大多都是千篇一概重复性东西太多，并且还不能解决问题。每每花费不少时间把本身带进了坑里。

所以把本身遇到的一些问题记录下来，以避免后面再次遇到不知所措。

项目使用的是 vue + element + axois。

1. 前端发送的是否为 Ajax 请求

在作用户超时登陆时当用户超时后，前端发送请求后端会返回 401 结果。这里采用的是 axios 添加请求拦截的方式实现。

不过在过程当中出现的问题是，在用户超时以后，前端发送请求始终没有返回结果。而代码并无问题，最后排查得知后端对请求接口作了一次判断接口是否是 Ajax 请求。

为了知足后端的要求，须要咱们发送的接口为 Ajax 请求。因此设置接口的 header 便可。

axios.interceptors.request.use((config) => {
  config.headers['X-Requested-With'] = 'XMLHttpRequest'
  return config
})
复制代码

固然了，这里是服务器用来检测是否为异步，若是你的服务器没作任何针对的反馈，那就不会出现这个问题了。

2. 上传文件

项目中须要导入 Excel 数据功能，这里直接使用的是 Element 的 Upload 组件 。

<el-upload action :show-file-list="false" :http-request="devUpload">
    <el-button
      class="reset-btn"
      type="primary"
      icon="iconfont icon-import"
      size="small"
      plain
    >批量导入</el-button>
</el-upload>
复制代码

如上所示，因为原有的功能不能知足后台给定的上传接口，因此这里使用了自定义上传功能「http-request」属性。

实现上传功能时，有一点须要注意，这里后端须要接收的是 「MultipartFile」类型。

一开始老是出现前端传过去的数据类型和「MultipartFile」不一致，查阅了一些资料，不少都是说设置请求接口的 Header 的 「Content-Type」 属性 为 「multipart/form-data」，或者 xxx。

也尝试了这种作法仍是不行。结果直接使用 axios 默认设置便可，咱们不须要要修改什么。

不过咱们传入的参数须要使用 fromData 类型。正确作法以下：

devUpload (fileObj) {
    let param = new FormData();
    param.append("file", fileObj.file);
    axios.post("/import", param);
}
复制代码

3. axios 发送 OPTIONS 请求

由于刚开始使用 axios 不久，以前大多都是使用 Jquery 的 Ajax 请求，没有出现过每次请求会多一个 OPTIONS 请求的状况。因而就在网上查看了缘由大体以下。

首先，跨域请求分为「简单请求」和「复杂请求」。而复杂请求会先发送一个预检请求 options。

哪些是复杂请求：

一、请求方法不是 GET/HEAD/POST。 二、若是是 POST 请求，但 Content-Type 不是 application/x-www-form-urlencoded, multipart/form-data, 或text/plain，这三种类型。 三、请求设置了自定义的 header 字段。

若是不想发送 options 请求，改成简单请求便可。

好比将 Content-Type 的类型 改成 application/x-www-form-urlencoded，或者其余方式。

这也是为何 Jquery 的 Ajax 没有发送 options 请求的缘由，由于它自己默认发送的类型是 application/x-www-form-urlencoded。

微信公众号：六小登登，更多干货文章。欢迎来一交流。