angular - syntaxerror - failed to execute open on xmlhttprequest '': invalid url ionic

Angular 2 no se pudo ejecutar abierto en XMLHttpRequest: URL no válida

Question

Estoy intentando llamar a un servicio, funciona en DHC, pero cuando trato de llamar a mi proyecto angular 2, este se bloquea, la solicitud del método es POST, recibe un objeto del cuerpo que tiene un correo electrónico y una contraseña, y la respuesta Es un token, que usaré en todo el proyecto para la autorización.

Aquí está mi código.

import { Injectable } from ''@angular/core'';
import { Http, Response, Headers, Request ,RequestOptions ,RequestMethod } from ''@angular/http'';
import {Observable} from ''rxjs/Rx'';
import ''rxjs/add/operator/map'';

@Injectable()
export class LoginService {
      constructor(private http:Http) { 
      }

  getToken(){
    var baseUrl = "xxx.xxx.x.xxx:xxxx/project/v1/admin/login";
    var headers = new Headers();
    headers.append("Content-Type", ''application/json'');
    var options = new RequestOptions({ headers: headers });
    var objeto = {''email'': ''xxxxxx'', ''pass'':''xxxx'' } 
    var body2 = JSON.stringify(objeto);
    var xhr = new XMLHttpRequest();
    return this.http
       .post(baseUrl, body2, options)
       .map((response: Response) => response.json())
       .subscribe(
           data => console.log(''Success uploading the opinion ''+ data, data),
           error => console.error(`Error: ${error}`)
       );
  }
}

Intento implementar la llamada XMLHttp Request desde angular 2, pero el error es el mismo, no sé si puedo usarlo en angular 2, aquí está el método

return Observable.fromPromise(new Promise((resolve, reject) => {
  //  let formData: any = new FormData();     
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                resolve(JSON.parse(xhr.response));
            } else {
                reject(xhr.response);
            }
        }
    }
    xhr.open("POST", baseUrl, true);
    xhr.send(body2);
}));

Ayuda :( y gracias

Answer 1

En mi caso, pude resolverlo corrigiendo la url para mi solicitud http desde el lado del cliente en lugar del servidor, como echonax mencionó de http:// faltante de localhost .

Mi problema fue, en mi solicitud this.http.get(this.domain + ''/api/prod/'' + id).map(res => res.json())

Me faltaba un / de la parte frontal de la api . Debería ser /api

Answer 2

Posibles escenarios:

1. Su formato de API es incorrecto, debería ser por ejemplo: http: localhost: 8080 /

2. En su api no tiene CORS habilitado, por lo que no está aceptando sus solicitudes

3. Le falta el carácter / al final, en mi caso tuve http: localhost: 8080 y no funcionó debido a que faltaba / al final

4. Estás utilizando http en lugar de https o lo contrario

5. Está creando la solicitud de sus credenciales en la API de forma incorrecta, esto puede deberse a errores en el código de la solicitud desde la parte frontal (angular, reaccionar, ...)

Answer 3

Si es un tipo de URL 192.168.. debe agregar un http:// o https:// al frente. Y es posible que deba habilitar las opciones de CORS en el lado del servidor.

Answer 4

si usa localhost, entonces solo use http: // antes de su localhost