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 會有個 Provisional headers are shown
。
你必須 登入 才能發表評論。