[SOLVED] How to solve 400 bad request error in my nuxt-strapi app?

How to solve 400 bad request error in my nuxt-strapi app?

I was working on a nuxt-strapi app 3 month ago. After 3 month delay, I decided to continue the project. In my app I have an Authentication system that uses nuxt-auth. The registration process works fine before. But now, it shows me errors in console. First this is the template part of register page:

register.vue template:

<v-form
    v-if="!success"
    v-model="valid"
    lazy-validation
    ref="form"
    class="my-form py-10"
    >
    <v-container>
        <v-row
        justify="center"
        >
        <v-col
            cols="12"
            md="9"
            align-self="center"
        >
            <v-text-field
            v-model="username"
            :rules="nameRules"
            label="نام کاربری"
            required
            class="emailClass"
            color="accent darken-4"
            >
            </v-text-field>
        </v-col>

        <v-col
            cols="12"
            md="9"
            align-self="center"
        >
            <v-text-field
            v-model="password"
            :rules="passRules"
            type="password"
            label="رمز عبور"
            color="accent darken-4"
            required
            ></v-text-field>
        </v-col>

        <v-col
            cols="12"
            md="9"
            align-self="center"
        >
            <v-text-field
            v-model="passwordRepeat"
            :rules="passwordRepeatRules"
            type="password"
            label="تکرار رمز عبور"
            color="accent darken-4"
            required
            ></v-text-field>
        </v-col>

        <v-col
            cols="12"
            md="9"
            align-self="center"
        >
            <v-text-field
            v-model="email"
            :rules="emailRules"
            label="آدرس ایمیل"
            color="accent darken-4"
            class="emailClass"
            required
            ></v-text-field>
        </v-col>
        </v-row>

        <v-row
        align="center"
        justify="center"
        >
                <v-btn
                color="accent lighten-5"
                class="regBtn mx-auto my-6 py-8"
                x-large
                elevation="8"
                @click="register"
                >
                ثبت نام
                </v-btn>
        </v-row>
    </v-container>

</v-form>

And this is the register method in script part:

register.vue script:

async register() {

    if( this.$refs.form.validate() ) {
        try {
            this.$axios.setToken(false);
            await this.$axios.post("/auth/local/register", {
            username: this.username,
            email: this.email,
            password: this.password,
            });
        } catch (e) {

          console.log(e);
        } // end of try-catch
    } else {
        console.log("some errors)
    }

}, // end of register method

I generally followed this tutorial for building the Authentication system and the version of my nuxt is 2.15.8. The version of my strapi is 3.6.8 and node version is 14.15.1.

Finally these are two images of the error occurred in the console:

img1:

img2:

I could not understand what is the reason of this error. I need some help to know what happened in my app after 3 month. Because I did not changed anything from that time!

Also something that is strange for me is that the information of the registered user is added in my strapi Users collection type (means in my database), but the result of post request is an error!

Solution

After a lot of searching for the reason of that error, I finally found that what the problem is. In my "strapi" admin panel, I turned off the Enable email confirmation part shown in the image below:

After that, the registration and login process works fine. Also, if someone wants that "Enable email confirmation" be turned on, he/she must be confident about sending verification email to the registered user.

Because I was working on my local PC and localhost, I turned it off. But for keeping that on, I think this guide could be helpful.