Im new to vue and nuxt, im using this ones to connect them to my API made with fastapi, and whenever i try to create an account via my API with the vue form i get this error

127.0.0.1:52137 - "OPTIONS /user HTTP/1.1" 405 Method Not Allowed

I've seen that sometimes axios sends an OPTION method to "test" the api if i get it.. But how do i solve this problem ?

Im new to this so do not hesitate to ask me more files/code.

Here is the Post method that im trying to reach and my registration page on VUE.

@app.post("/user", response_model=_schemas.UserBis)
async def create_user(user: _schemas.UserIn, db: _orm.Session = fastapi.Depends(_services.get_db)):
  db_user_email = await _services.get_user_by_email(email=user.email, db=db)
  if db_user_email:
      raise fastapi.HTTPException(
          status_code=400, detail="User with that email already exists"
      )
  db_user_username = await _services.get_user_by_username(username=user.username, db=db)
  if db_user_username:
      raise fastapi.HTTPException(
          status_code=400, detail="User with that email already exists"
      )
  db_user_pseudo = await _services.get_user_by_pseudo(pseudo=user.pseudo, db=db)
  if db_user_pseudo:
      raise fastapi.HTTPException(
          status_code=400, detail="User with that pseudo already exists"
      )
  user = await _services.create_user(user=user, db=db)
  return _schemas.UserBis(data=user)

VUE:

<template>
    <section >
      <div >
        <div >
          <div >
            <h2 >Register!</h2>

            <Notification :message="error" v-if="error"/>

            <form method="post" @submit.prevent="register">
              <div >
                <label >Username</label>
                <div >
                  <input
                    type="text"
                    
                    name="username"
                    v-model="username"
                    required 
                  />
                </div>
              </div>
              <div >
                <label >Pseudo</label>
                <div >
                  <input
                    type="text"
                    
                    name="pseudo"
                    v-model="pseudo"
                    required
                  />
                </div>
              </div>
              <div >
                <label >Email</label>
                <div >
                  <input
                    type="email"
                    
                    name="email"
                    v-model="email"
                    required
                  />
                </div>
              </div>
              <div >
                <label >Password</label>
                <div >
                  <input
                    type="password"
                    
                    name="password"
                    v-model="password"
                    required
                  />
                </div>
              </div>
              <div >
                <button type="submit" >Register</button>
              </div>
            </form>

            <div  style="margin-top: 20px">
              Already got an account? <nuxt-link to="/login">Login</nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </section>
</template>

<script>
import Notification from '~/components/Notification'

export default {
    components: {
      Notification,
    },

    data() {
      return {
        username: '',
        pseudo: '',
        email: '',
        password: '',
        error: null
      }
    },

    methods: {
      async register() {
        try {
          await this.$axios.post('user', {
            username: this.username,
            pseudo: this.pseudo,
            email: this.email,
            password: this.password
          })

          await this.$auth.loginWith('local', {
            data: {
            email: this.email,
            password: this.password
            },
          })

          this.$router.push('/')
        } catch (e) {
          this.error = e.response.data.message
        }
      }
    }
}
</script>

CodePudding user response：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS Any non simple POST request triggers a pre flight check (OPTIONS request) to confirm the action is supported. Your API will need to be modified to allow these requests.

CodePudding user response：

I found a slution to my problem here: https://stackoverflow.com/a/66460861/18428648

Allowing all origins solved my problem, just added a few lines of code to my FastAPI API.