i am one day old in vue and i am facing a problem with a 404 code. I am trying to implement vue as frontend, django as back end and some of the routes are still not implemented. I have written this script inside my SignUp.vue

<script>
    
    import axios from 'axios'
    import {toast} from 'bulma-toast' 

    export default{
        name : 'SignUp',
        data(){
            return {
                username :'',
                password1 : '',
                password2 : '',
                errors : [

                ]
            }
        },
        methods: {
            submitForm(){
                this.errors = []
                if(this.username === ''){
                    this.errors.push('The username is missing')
                }
                if(this.password1 === ''){
                    this.errors.push('The password is too short')
                }
                if(this.password1 !== this.password2){
                    this.errors.push('The passwords are not matching')
                }

                if(!this.errors.length){
                    //this is an object that sends data to the back end
                    const formData = {
                        username : this.username,
                        password : this.password1,

                    }
                    axios
                        .post('/api/v1/users/', formData)
                        .then(response => {
                            toast({
                                message: "Account was created, please log in",
                                type: 'is-success',
                                dismissible:true,
                                pauseOnHover: true,
                                duration: 2000,
                                position: 'bottom-right'
                            })
                            this.$router.push('/dashboard')
                            return response
                    })
                    .catch(error =>{
                        if (error.response){
                            for (const property in error.response.data){
                                this.errors.push(`${property}: ${error.response.data[property]}`)
                            }
                        }
                        else if(error.message){
                            this.errors.push('Something went wrong. Please try again!')
                        }
                    })

                }
            }
        },
    }
</script> 

Every time i try to sign up it gives my an error like this:Failed to load resource: the server responded with a status of 404 (Not Found). The error list in web page shows me a strange error like this:

0: <

1: !

2: D

3: O

4: C

5: T

6: Y

7: P

8: E

9:

10: h

11: t...

Ihave tried to restart my chrome and clear cache but still i have not solved it yet. Thank you for your time

CodePudding user response：

I guess by now it is not possible to give you a "solution" as you're not giving enough information to solve your problem.

Except if you misspelled the path to your API (/api/v1/users/) I think the problem actually come from your API. Either your "rewrite rule" in "urls.py" or file alike, or the function that it calls is wrong. Check syntax on docs.djangoproject.com.

And, passing by, you're "strange error" is just caused by your loop on the string error.response.data, so I would suggest to just push the data without loop, or to use the following:

.catch(error => {
  if (error.response) {
    if (typeof error.response.data === "String") {
      this.errors.push(error.response.data)
    } else {
      for (const property in error.response.data){
        this.errors.push(`${property}: ${error.response.data[property]}`)
      }
    }
  } else if (error.message) {
    this.errors.push('Something went wrong. Please try again!')
  }
})

In conclusion, if you can't find the problem in your API or in a misspelling mistake, you can still add your django content in your question, to make it more complete.

CodePudding user response：

It seems he API has not been implemented, or you are not calling the correct endpoint in django.

Thus django is simply returning the default 404 html page as a response; which is a string or text/html format. and your error block:

for (const property in error.response.data){
  this.errors.push(`${property}: ${error.response.data[property]}`)
}

is simply parsing it out as a array of characters in the format <index>: <char> as using for .. in with an array will give you the indexes of the elements in array