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。

微信公衆號：六小登登，更多幹貨文章。歡迎來一交流。