2020 年 5 月 14 日

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

Element: el-upload 上傳時 headers 帶入 Spring Boot 需要的 X-CSRF-TOKEN

1 min read
賞蟹步道

賞蟹步道

Element: el-upload 上傳時 headers 帶入 Spring Boot 需要的 X-CSRF-TOKEN

 

Element UI 的官方網站上有 User avatar upload 的範例,類似 WordPress 撰寫 Ajax 功能範例 中預防跨站請求偽造CSRF(Cross-site request forgery),在 Spring Boot 也有這樣的防護,所以在送出上傳檔上請求時,需要在 request header 中加入 X-CSRF-TOKEN 的資料,這樣才不會有 status: 403, error: “Forbidden” 的錯誤,而被阻擋。

在 el-upload 中有一個參數為 headers 可以用來放這 request header 的 X-CSRF-TOKEN 資料,因為 el-upload 的 headers 屬性 在官方文件說明中是個物件( Object ),不接受函數( Function ),所以要用 :headers=”{‘X-CSRF-TOKEN’:csrfToken}” 來寫,而程式碼中的 csrfToken 則是在 computed 中的函數( Function )。

<html>
<head>
  <meta name="_csrf" content="${_csrf.token}" />
  <meta name="_csrf_header" content="${_csrf.headerName}"/> 
</head>
<body>

<el-upload
  class="avatar-uploader"
  action="/auth/upload/file"
  :headers="{'X-CSRF-TOKEN':csrfToken}"
  :data="{uploadType:'avatar'}"
  :show-file-list="false"
  :on-success="handleAvatarSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

</body>

 

在 computed 中的函數( Function ): csrfToken ,主要是取得 spring boot 給予的 _csrf.token

new Vue({
    el: "#app",
    mixins: [appsMixin],
    data() {      
      return {
        timezoneList: tzList,
        imageUrl: '/auth/showimg/avatar/admin.png',
      }
    },
    computed:{
      csrfToken(){
        var token_csrf = $("meta[name='_csrf']").attr("content");         
        return token_csrf;
      }
    }
})

 

當執行上傳時,可以看到有 request header 的 X-CSRF-TOKEN 會有值帶入。

el-upload

上傳成功後,el-upload 會有個 Provisional headers are shown

el-upload

Copyright © All rights reserved. | Newsphere by AF themes.