axios.post automatically splice url with my params

问题

I want to implement an api with vue and axios in my front-end:

methods:{
  startSpider:function(event){
    alert("spider is ready to run!");

    let data = {'searchKey':this.searchKey,
            'category':this.category,
            'num':this.num};
    axios.post("{% url 'main:getCommodityInfo'%}",
                data,
                {headers:{'X-CSRFToken': this.getCookie('csrftoken')}})
        .then(response=>{
          console.log(response.data)
        })
        .catch(error=>{
          console.log(error);
          alert("connection has error")
        })
  },

When I call this function, I expect to get data from the back-end and stay at the inital url. It does receive data but the url quickly changed.

After some exploration, I find the browser implement two request! First, POST, and next GET:

Using 'searchKey':'switch', 'category':'electronic','num':60 as an example.

and My browser url subsequently changes to

Why it happens? I have just used POST not GET. The axios post seems to automatically splice inital url with the params. I have tried a lot of ways but failed. Even I have writed a small demo with the similiar structure like this to test, but the demo runs well! What happened? Help me please...

---

Updated I: Give my server behavior(django-view) and my router related is path('getCommodityInfo/',views.getCommodityInfo, name = 'getCommodityInfo')

def getCommodityInfo(request):
    print(request.body)
    return JsonResponse({"data":True}, safe=False)

---

Updated II: Give my front-end form:

                <form>
                    <label for="searchKey">KeyWords</label>
                    <input v-model="searchKey" placeholder="Input Search Key" type="string" class="form-control" id="searchKey" name="searchKey">

                    <label for="category">Commodity Category</label>
                    <select v-model="selected" id="category" name="category">
                        <option v-for="option in options" v-bind:value="option.value">
                            ${option.text}
                        </option>
                    </select>
                    <br>
                    <label for="num">Amount</label>
                    <input v-model="num" placeholder="Input amount needed" type="string" class="form-control" id="num" name="num" >
                    <button v-on:click="startSpider"  class="btn btn-default">Submit</button>
                    <p>KeyWords : ${ searchKey }</p>
                    <p>Category : ${ selected }</p>
                    <p>Amount: ${ num }</p>
                </form>

回答1:

The bug happened because of not setting button type. We could check this:

The missing value default is the Submit Button state.

And in the front-end form there is no type for the button, so the button type will be submmit button. When click on the button, it will automatically send a get request.

Modify the button like this:

<button v-on:click="startSpider"  class="btn btn-default" type='button'>Submit</button>

来源：https://stackoverflow.com/questions/55690356/axios-post-automatically-splice-url-with-my-params