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。

哪些是复杂请求：

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

如果不想发送 options 请求，改为简单请求即可。

比如将 Content-Type 的类型改为 application/x-www-form-urlencoded，或者其他方式。

这也是为什么 Jquery 的 Ajax 没有发送 options 请求的原因，因为它本身默认发送的类型是 application/x-www-form-urlencoded。

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