Error receiving server data

0

I'm starting a project to connect to a socket server and I can not get it to work. I put the code and explain.

<script type="text/javascript">
    var direccion = 'http://xxx.xxx.xxx.xxx/api/miurl';
    new Vue({
        el: '#main',
        data: {
            datos: [],
            Usuario_Cod: '',
            Usuario_Nom: '',
            Usuario_Token: ''
        },
        methods: {
            getUsuarios: function (usuario, clave) {

                var headers = {
                    'Content-Type': 'application/json',
                    'Authorization':'123123123123ASDFASDF',
                    'Access-Control-Allow-Origin':'*'
                };
                var jn = {
                    Cmd: "Login",
                    User: usuario,
                    Pass: clave
                };

                axios({
                    method: 'post',
                    url: direccion,
                    data: JSON.stringify(jn),
                    config: 'Content-Type:"application/json"' //{ headers }
                }).then((response) => {
                    alert('Mensaje OK');

                    /* Codigo comentado temporalmente
                     this.datos = response.data;
                     this.Usuario_Cod = this.datos.Usuario.Codigo;
                     this.Usuario_Nom = this.datos.Usuario.Nombre;
                     this.Usuario_Token = this.datos.Usuario.Token;
                     */
                }).catch(alert('Mensaje Error'));
            }
        }
    });
</script>

I send this data to a socket server (by pressing a button with the v-on: click event) and the server receives it and returns a correct json and with the response 200 OK , but it triggers the catch with the message " Message Error ". I accept the error and immediately the then is triggered with the message " Message OK ".

If I delete the catch , the message " Message OK " does not fire. In the first case, while the error message is on the screen, in the browser console I see that the message 200 has been correctly received next to the json. When I press the error button, it appears in OK message and when this is pressed, the POST event is erased from the console and the page seems to be reloading.

The response header in the browser is this:

Access-Control-Allow-Credentials true
Access-Control-Allow-Headers authorization, origin, x-requested-with, content-type
Access-Control-Allow-Methods PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin *
Connection Keep-Alive
Content-Length 911
Content-Type application/json; charset=UTF-8
Date Wed, 25 Apr 2018 12:09:09 GMT
Keep-Alive timeout=5, max=100
Server Apache/2.4.29 (Win32) OpenSSL/1.0.2l PHP/7.1.11

I'm stuck here. Thank you all

    
asked by user84680 25.04.2018 в 14:45
source

1 answer

1

The correct way to use the API is:

axios({
  method: 'post',
  url: direccion,
  data: JSON.stringify(jn),
  config: 'Content-Type:"application/json"'
})
.then(function(){...})
.catch(function(){...});

But in the .catch() you have:

.catch(alert('Mensaje Error'));

That what it does is invoke immediately the alert and the result pass it to .catch() , when not even the request has been sent to the service.

You must add a function there do not invoke it directly:

.catch(function(){
    alert('Mensaje Error');
});
    
answered by 25.04.2018 в 15:14