Search code examples
vue.jspostaxioscorspreflight

Why is Axios sending an extra 204 preflight request with my POST request?

Whenever I send a POST request using Vue.js (3.x), an additional request to the same URL is being made with HTTP status code 204 & type of "preflight".

What is this preflight request and how can I fix it so it isn't sent as a duplicate?

Register.vue

async submit() {
    this.button = true;

    try {
        const response = await axios.post(`register`, this.form);

        (response.data.success == false)
            ? console.log(response.data.message)
            : this.$router.push('/');
    } catch (error) {
        let { errors } = error.response.data;

        this.button = false;
        this.errors = {};

        Object.keys(errors).forEach(element => {
            this.errors[element] = errors[element][0];
        });
    }
},

network tab showing 204 preflight request with 404 XHR request to register endpoint

Solution

  • This is not an issue and is controlled by the browser by design.

    It is not something Axios or any other HTTP client decides to send.

    A preflight request is a CORS OPTIONS request & are automatically sent by browsers specifically to check if the server would support the call you are trying to make in terms of method, headers and origin.

    You can safely ignore the requests if they do not fail as that means that the server will not be rejecting your request on the basis of the aforementioned factors.

    Your issue relates to the endpoint not existing as you are getting a 404 Not Found error - check to see if the endpoint exists or if you are calling it correctly.