How to fix 404 error when communicate with API

user_12217905 0
Viewed 578

I am using nuxt.js (frontend) and laravel6 (backend) API. Laravel app is running http://172.16.10.86:8000 port and nuxt.js app is running http://localhost:3000. I want to send data in my MySQL database using nuxt.js app. When I send POST request from my nuxt.js app it redirects properly but does not insert any data in database. Inside network tab, I found a 404 error.

       methods:{
        async register(){
        try {
        await this.$axios.post('/auth/register',this.form);
        } catch(e) {
            return;
        }

            this.$auth.login({data: this.form});

            this.$router.push({name:'index'});
        }

nuxt.config.js

auth: {
    strategies: { 
         local: { 
          endpoints:{
           login:{
      url: '/auth/login',method: 'post', propertyName: 'token'
    },
    user:{
      url:'me', method: 'get', propertyName: 'data'
    },
    logout:{
      url:'logout', method: 'get'
    }
  }
 } 
 },
 axios:{
   baseUrl:'http://172.16.10.86:8000/api'
 },
nuxt.js laravel javascript
2 Answers

I believe you just typo in your axios config.

It's should be baseURL not baseUrl. Please take a look at the docs.

user_44840160

You need to add full URL for the API server.

 methods:{
    async register() {
    try {
    await this.$axios.post('http://172.16.10.86:8000/api/auth/register', this.form);
    } catch(e) {
        return;
    }

        this.$auth.login({data: this.form});

        this.$router.push({name:'index'});
    }
user_86234170
Related