javascript의 submit에서 controller 호출이 안되고 403 에러가 나요.

 javascript를 이용하여 삭제에 대해 다시한번 확인을 요청하려 합니다.

기존에 form에 직접 method, action을 입력했을때는 controller의 delete함수가 잘 호출되었으나, 

javascript로 form을 작동시에는 controller의 delete함수가 호출되지 않고, 403 에러가 발생합니다.

<form id = "deleteForm" >
    <input type="hidden" name="sdkVer" class="form-control"
           th:value="${item.sdkVer}" readonly>
    <input type="hidden" name="plfmCode" class="form-control"
           th:value="${item.plfmCode}" readonly>
    <input type="hidden" name="cntryCode" class="form-control"
           th:value="${item.cntryCode}" readonly>
    <input type="hidden"  name="epgSettingId" class="form-control"
           th:value="${epg.epgSettingId}" readonly>
    <td>
        <button class="btn btn-primary " onclick="checkDelete()"  >삭제</button>
    </td>
    <script type="text/javascript">
    function checkDelete() {
        var check = confirm("삭제를 하시겠습니까?");
        if(check == true){
          var deleteForm = document.getElementById("deleteForm");
          deleteForm.action='/delete';
          deleteForm.method = 'post';
          deleteForm.submit();
        }
        else if(check == false){
          document.write("취소를 눌렀습니다.");
        }
    }
 </script>
</form>

@PostMapping("/delete")
public String delete(Model model, @RequestParam Map<String , String> attributes) throws IOException {
    System.out.println("HomeController.delete");
    System.out.println("attributes.get(\"plfmCode\") = " + attributes.get("plfmCode"));
    EpgId originalEpgId = new EpgId(attributes.get("epgSettingId"), attributes.get("plfmCode"), attributes.get("sdkVer"), attributes.get("cntryCode"), "N");

    itemService.delete(originalEpgId);
    return post_detail(new Item( attributes.get("plfmCode"),  attributes.get("sdkVer"),  attributes.get("cntryCode")), model);

}