首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 项目实战上传文件与接口OPTIONS

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

作者头像
六小登登
发布2019-05-05 11:40:39
1.3K0
发布2019-05-05 11:40:39
举报
文章被收录于专栏:Modeng的专栏Modeng的专栏

在项目的开发过程中难免会遇到许多的坑,寻找答案成为了至关重要的一步,职场中解决问题的能力是必要切重要的,有些问题网上给的答案大多都是千篇一律重复性东西太多,而且还不能解决问题。往往花费很多时间把自己带进了坑里。

因此把自己遇到的一些问题记录下来,以免后面再次遇到不知所措。

项目使用的是 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。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年04月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 前端发送的是否为 Ajax 请求
  • 2. 上传文件
  • 3. axios 发送 OPTIONS 请求
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档