About the POST in axios.js connecting to the JAVA background, the value cannot be obtained, or the problem is solved by intercepting it directly in JavaScript

I ran into this problem a long time ago, and I was not in the mood to study it at that time, but tonight I studied this problem overnight, and Baidu had a lot of them. But these answers are Feces, which is really annoying, just post the code and it's ok. Send out the complete code, let people run to see if it is really solved, and then find the answer in a pile of rubbish.

 

 

In order to solve this problem, I myself wrote a demo file in the original project.

Let me talk about the problem. When I sent a post from axios, the data sent by JavaScript was always processed and no value was obtained in the Java background, and even the method was not used. I keep reporting this error org.springframework.web.HttpRequestMethodNotSupportedException: Request method'GET' not supported. Looking at the console's network, it also keeps sending GET connections, and the message header is indeed a POST connection. This axios is really rubbish! ! !

The following methods are not available to receive values

                axios.post('/userUel', {
                    param: '1'
                }, {
                    // cancelToken: source.token
                })

    @ResponseBody
    @RequestMapping(value = "/getHobbys", method ={RequestMethod.POST})
    public Hobbys getHobbys( @RequestParam(value = "id",required = false) String id){
        System.out.println("-----------------------------");
        System.out.println("id:"+id);//结果   id:null
    }

 Using qs.js to json format to transfer values, Baidu is all of this kind, useless!

//这是.vue的使用，如果百度.js的方式实现，还是没用，后台得到的值空值
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

mport qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options)

Real and effective, no problem with pro-testing!

var app1=new Vue({
        el:'#app1',
        id:'1',
        created: function (){
            this.getHobbysAll(1);
        },
        methods: {
            getHobbysAll: function (id) {
                var str = '{"id":23}';
                console.log(str);
                const params = new URLSearchParams();
                params.append('id', '1');
                axios.post('http://localhost:8080/getHobbys', params).then(function (response) {
                    console.log("12345");
                    console.log(response);
                    console.assert(response!=null)
                    var arr = response.data;
                    console.log(arr)
                });

         
            }
        }
})

It is convenient for you to check and prove that it has been resolved.

Baidu cloud disk: link: https://pan.baidu.com/s/189rLR36W8fH_evIgL_IQug 
extraction code: 010r