0
votes

I have a problem configuring the header attribute in the @RequestMapping annotation.Here is my code: HTML page :

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" th:src="@{/css/url_rearch_params.js}"/>
</head>
<body>
    <div id="app">
    <h1>TEST FORM</h1>
     <form action="" method="post">
        <p>Type description: <input type="text" v-model="type.description"/></p>
        <p><button v-on:click="addType()"> Send </button><input type="reset" value="Reset" /></p>
    </form>
    </div>


    <script src="http://cdn.jsdelivr.net/vue/1.0.10/vue.min.js"></script> 
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script>
        Vue.prototype.$http = axios;
        new Vue({
            el:'#app',
            data:{
                type:{description:''}
            },
            methods:{
                addType(){
                    const config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded',
                                                 'Accept': 'application/x-www-form-urlencoded'
                                              }
                                   };
                    let newType = {description:this.type.description};
                    console.log(newType);
                    this.$http.post('/types/insert',newType,config).then(response => {
                        console.log(response);
                    });
                }
            }
        });
      </script>
</body>
</html>

And my java code:

@RequestMapping(value = "/insert",method = RequestMethod.POST, headers = {"Accept=application/x-www-form-urlencoded","Content-Type = application/x-www-form-urlencoded"},consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public @ResponseBody void createType(@RequestBody Type type) {
    System.out.println(type);
    typeService.createType(type);
}

The problem if I try to execute the method I have the following message:

There was an unexpected error (type=Not Found, status=404).

If I remove :

headers = {“Accept=application/x-www-form-urlencoded”,“Content-Type = application/x-www-form-urlencoded”}

of the @requestpost parameter I have the following error :

There was an unexpected error (type=Unsupported Media Type, status=415). Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported

N.B : I already visited this post but it does not solve my problem

Thank you in advance for your help.

1
I highly doubt that you are actually sending an application/x-www-form-urlencoded. Looks like a regular post with JSON and nothing url encoded. Also why are you messing around with headers yourself, you shouldn't need that. Remove the headers from the client (axios is smart enough to figure it out itself). - M. Deinum
Hi, actually, if I use consumes = "application / json" the method runs fine and I have the expected result back-end side.But in the browser I have this message : There was an unexpected error (type=Unsupported Media Type, status=415). Content type 'application/x-www-form-urlencoded' not supported - kasko
Because that isn’t what you are sending, you are sending json back as well... - M. Deinum
And I do not know how to solve this problem.If you have an idea thank you for helping me. - kasko
As stated in my first comment remove the headers from your Javascript. Axios is smart enough to Figure it out. - M. Deinum

1 Answers

-1
votes

Instead of headers, try consumes

@RequestMapping(value = "/insert",method = RequestMethod.POST, consumes="application/x-www-form-urlencoded","Content-Type = application/x-www-form-urlencoded"},consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)