3

Este es el código que realiza la petición:

const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Connection': 'upgrade',
        'Upgrade' : 'WebSocket',
        'Sec-Websocket-Version': '13'
      })
    }


let userJSON = JSON.stringify(user)
    this.http
       .post<any>( this.url + "/users/login", userJSON, httpOptions )
       .subscribe(
          data => {
            console.log("POST REQUEST SUCCESFUL ", data)

          },
          error => {
            console.log("Error ", error)
          }
       )

Y este es el error que me da el navegador:

introducir la descripción de la imagen aquí

He googleado y hay gente que menciona que el navegador no permite añadir ciertas cabeceras por seguridad. Otros que dicen que las cabeceras deben ser constantes, etc, etc. Ninguno de esos métodos me ha funcionado, hasta ahora.

¿Dónde está el problema?

Actualizado:

Para contextualizar, trato de emplear WebSockets, este es el modelo que uso para ello:

WebSocket.ts

export class WsClient{
  
  ws: WebSocket
  url:string
  eventListener = {};

  constructor(url){
    this.url = url
    this.ws = new WebSocket(url)
    this.ws.onmessage = response => {
      try {
        let data = JSON.parse(response.data);
        if (data) {
          let cb = this.eventListener[data.event];
          if (cb) cb(data.data);
        }
      } catch (e) {
        console.log(e);
      }
    };
  }

  on = (event, cb) => (this.eventListener[event] = cb);
  emit = (name, data) => {
    let event = {
      event: name,
      data: data
    };
    let rawData = JSON.stringify(event);
    this.ws.onopen = () => this.ws.send(rawData);
  };

}

login.component.ts

export class LoginComponent implements OnInit {

  constructor(private usuariosService: UsuariosService) { }

  model = new User("","")

  ngOnInit() {
  }

  login(){

    var ws = new WsClient("ws://localhost:3003/login");

    ws.on("response", data => {
      console.log("response: ", data)
    })

    ws.emit("message", "hello")

    this.usuariosService.login(this.model)
    console.log("Done")
  }

}

usuarios-service.service.ts

export class UsuariosService {

  url:string
  private socket;

  constructor(private http: HttpClient) {
    this.url = "http://localhost:3003"
  }

  login(user: User){

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Connection': 'upgrade',
        'Upgrade' : 'WebSocket',
        'Sec-Websocket-Version': '13'
      })
    }

    let userJSON = JSON.stringify(user)
    this.http
       .post<any>( this.url + "/users/login", userJSON, httpOptions )
       .subscribe(
          data => {
            console.log("POST REQUEST SUCCESFUL ", data)

          },
          error => {
            console.log("Error ", error)
          }
       )
  }
}

Si añado las cabeceras tengo este error. Si no, igualmente el servidor en ambos casos me devuelve este error:

introducir la descripción de la imagen aquí

8
  • ¿Tienes un proxy inverso? Es posible que se estén perdiendo headers por algún lado el 8 abr. 2019 a las 9:34
  • No, la API Rest la he escrito en Golang, y la librería usada es la estándar: (golang.org/pkg/net/http) y yo tampoco he programado ningún tipo de comportamiento que se asemeje al de un proxy inverso. Eso sí, cuando hago prints en cualquier punto del servidor las cabeceras que necesito están vacías. Pero algunas de las cabeceras que estoy enviando efectivamente no están permitidas y el declarar un websocket y emplearlo tampoco parece declararlas implícitamente, ¿cómo enviarlas entonces? el 8 abr. 2019 a las 9:51
  • 1
    Para golang veo que hay una librería que implementa websockets (gorilla), pero no veo cómo se gestionan con la librería estándar... ¿quizá tu implementación no sea correcta? el 8 abr. 2019 a las 10:35
  • 1
    Aquí tienes un ejemplo de cómo se configura, no tardarías mucho en comprobarlo: es.stackoverflow.com/questions/168993/… el 8 abr. 2019 a las 10:50
  • 1
    Hola, tras un intenso día de búsqueda y testeo, me he dado cuenta de varias cosas: Que los Websockets requieren de una petición GET y no de un POST para inicializarse y, (y aquí viene la solución a mi problema) que los propios Websockets necesitan de una ruta concreta con ese tipo de petición GET para inicializarlos. En código estaba añadiendo cabeceras desde el servidor ya que en el cliente estaban prohibidas, hasta que me ha saltado ese error que me indicaba que un Websocket requiere de una petición de tipo GET, gracias por la ayuda y saludos! el 8 abr. 2019 a las 21:30

2 respuestas 2

3

Parece que por diseño no puedes establecer manualmente ciertas cabeceras:

Estas cabeceras están prohibidas para que el navegador conserve control completo sobre ellas

Fuente: https://stackoverflow.com/a/28162228/4574

2
3

Como comentas, hay ciertos encabezados que no se permiten añadir programáticamente porque son gestionados por el propio navegador u otros elementos que puedan participar en la conexión (proxies, routers...).

Por lo que veo, estás intentando crear una conexión a través de Websockets. Cuando haces una conexión de este tipo, no necesitas hacer el upgrade manualmente, el objeto WebSocket se encarga ya de hacer el handshake:

const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
2
  • He actualizado el segundo enlace, me lié al hacer un C&P el 8 abr. 2019 a las 8:15
  • Hola, gracias por tu aporte. Eso mismo consideraba yo, he actualizado la pregunta para que veas que ese paso también lo realizo en el modelo que he creado para ello. Es por eso que ando tan loco con este problema. Sin añadir nada el servidor sigue diciéndome que no encuentra el upgrade en las cabeceras. el 8 abr. 2019 a las 9:06

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.