Solve the problem that vue request interface succeeds for the first time and fails for the second time

Use vue to request the interface to find the problem:

I can only request once, and then when I press the button to request, I find that

502 (this is defined by the interface) 502 is to pass an empty value over this is one of the cases, and there are other cases you can try my way

Then I found that there was nothing wrong with my front-end code and there was nothing wrong with my interface code

data() {
  return {
    form: {
      old_password: '',
      new_password: '',
      confirm_password: ''
    }
  }
},

It can be solved by re-assigning the value back

this.$http.post('/api/users/modifyPassword', this.form,
  (res) => {
    this.form = {
      old_password: this.form.old_password,
      new_password: this.form.new_password,
      confirm_password: this.form.confirm_password
    }
    if (is.object(res)) {
      console.log(res)
      if (res.code === '0') {
        this.$router.push({ path: '/my/' })
        this.$toast.show(res.msg)
      } else {
        this.$toast.show(res.msg)
      }
    }
  })

Additional knowledge: axios request interface is used in vue, and the request is sent twice

The axios request interface is used in vue, and the request will be sent twice

Browsers are divided into simple requests and non-simple requests:

Solution:

Cross-domain request needs to send Option pre-request once, and OPTIONS is to check whether cross-domain is allowed. If you don't want OPTIONS request, just let the back end directly return when it encounters option, and the front end can not handle it.