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