Error al loguear

[Susanelizabetth]

Luego de que el usuario se registra en /sign-up, pasa al log in en a /log-in. El registro entra bien a django, pero por por alguna razón no permite al usuario entrar.

Este es el mensaje del error: {"message":"Network Error","name":"Error","stack":"Error: Network Error\n at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15)\n at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:99:14)","config":{"url":"/api/v1/token/login/","method":"post","data":"{\"username\":\"eivar-mo\",\"password\":\"sscc*1234\"}","headers":{"Accept":"application/json","Authorization":"","Content-Type":"application/x-www-form-urlencoded"},"baseURL":"http://127.0.0.1:8000","transformRequest":[null],"transformResponse":[null],"timeout":0,"withCredentials":true,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false}}}

Failed to load resource: net::ERR_FAILED

Esta es la parte de la conexión en Vue, en src/views/LogIn.vue:

  async submitForm(){

     axios.defaults.headers.common['Authorization'] = ""
        localStorage.removeItem("token")
        const formData = {
            username: this.username,
            password: this.password
        }
        await axios 
            .post("/api/v1/token/login/", formData, { withCredentials: true,
                                                      headers: {
                                                     'Content-Type': 'application/x-www-form-urlencoded',
                                                     'Accept': 'application/json',
                                                    }})
            .then(response => {
                const token = response.data.auth_token

                this.$store.commit('setToken', token)
                axios.defaults.headers.common["Authorization"] = "Token " + token

                localStorage.setItem("token", token)

                const toPath = this.$route.query.to || '/cart'

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

                    console.log(JSON.stringify(error))
                }
            })
    }`

Y donde están las funciones para iniciar, crear y remover, están en src/store/index.js

En django agarra la url de djoser.urls.authtoken en django_deepeach\django_deepeach\urls.py.

[eivaremir]

El error se debia a que existia un problema con el CORS, chrome no dejaba recibir el response sencillamente porque no venia un header con permisos para que el localhost:8080 pudiera acceder a ese endpoint puntual (lo cual es seguro pero es ilogico ya que es tu frontend), a pesar de que ya existía

CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
]

ahora al resolver el problema del cors salieron mas errores con el token