web-dev-qa-db-fra.com

Angular 2 Echec de l'exécution de l'ouverture sur XMLHttpRequest: URL non valide.

J'essaie d'appeler un service, ça marche dans DHC, mais quand j'essaie d'appeler mon projet angular 2, ça plante, la demande de méthode est POST, reçoit un objet de body qui a un email et un mot de passe, et la réponse est un jeton, que je vais utiliser dans tout le projet pour autorisation.

Voici mon code.

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}`)
       );
  }
}

J'essaie d'implémenter XMLHttp Request call from angular 2, mais l'erreur est la même, je ne sais pas si je peux l'utiliser en angular 2, voici la méthode

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);
}));

Aide :( et merci

angulartypescriptxmlhttprequestjwt
18
Mari Luna

Si c'est un 192.168.. type d'URL, vous devez ajouter un http:// ou https:// devant lui. Et vous devrez peut-être activer les options CORS côté serveur.

37
eko

Dans mon cas, j'ai pu résoudre le problème en corrigeant l'URL de ma requête http du côté client au lieu de côté serveur, comme indiqué par echonax comme manquant http:// Dans localhost.

Mon problème était, dans ma demande this.http.get(this.domain + '/api/prod/' + id).map(res => res.json())

Il me manquait un / À l'avant de api. Ce devrait être /api

13
EyoelD

si vous utilisez localhost, utilisez uniquement http: // avant votre localhost

1
Nagender Chauhan

Un autre contexte dans lequel cette erreur peut survenir est lié à l'utilisation d'intercepteurs pour définir un chemin de base. Quelque chose comme ce qui suit:

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {

  constructor(private logger: LoggingService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // one way is to except / include only some urls by checking request.url

    const clonedRequest = request.clone({
      withCredentials: true
    });

    // this.logger.logTrace("Sending with credentials request: ", request.urlWithParams);
    return next.handle(clonedRequest);
  }
}

Si cet intercepteur se déclenche lorsqu'une demande adressant une URL http/https complète est fournie au client http, il créera une URL non valide.

0
Alexei

Scénarios possibles:

  1. Votre format d'api est incorrect, il devrait être par exemple: http: localhost: 8080/

  2. Dans votre API, vous n'avez pas activé CORS , de sorte qu'il n'accepte pas vos demandes.

  3. Il vous manque le caractère / à la fin, dans mon cas, j'avais http: localhost: 808 et ne fonctionnait pas à cause du caractère manquant / = à la fin

  4. Vous utilisez http au lieu de https ou l'inverse

  5. Vous créez de manière incorrecte la demande de vos informations d'identification dans l'API. Cela peut être causé par des erreurs dans le code de la demande provenant de la partie frontale (angulaire, réactif, ...).

0
dayanrr91