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

最新推荐文章于 2025-06-01 09:42:11 发布

原创

最新推荐文章于 2025-06-01 09:42:11 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文记录了在Vue项目中遇到的前端Ajax请求、文件上传及axios发送OPTIONS请求的问题。前端设置接口header确保Ajax请求，使用Element Upload组件自定义上传功能，处理上传文件类型与后端接口匹配，理解跨域请求中的OPTIONS预检机制，解决复杂请求发送OPTIONS的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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