web-dev-qa-db-ja.com

Angular 2 XMLHttpRequestでのオープンの実行に失敗しました：無効なURL

私はサービスを呼び出そうとしていますが、それはDHCで動作しますが、angular 2プロジェクトで呼び出しようとすると、クラッシュし、メソッドリクエストはPOSTであり、ボディからオブジェクトを受け取ります電子メールとパスワードがあり、応答はトークンであり、プロジェクト全体で承認のために使用します。

これが私のコードです。

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

angular 2からXMLHttp Request呼び出しを実装しようとしていますが、エラーは同じです。angular 2で使用できるかどうかわかりません。ここに方法があります

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

ヘルプ:(そしてありがとう

angulartypescriptxmlhttprequestjwt
18
Mari Luna

192.168..タイプのURLの場合は、その前にhttp://またはhttps://を追加する必要があります。また、サーバー側でCORSオプションを有効にする必要がある場合があります。

37
eko

私の場合、localhostからの_http://_が欠落していることからechonaxが言及したように、サーバー側ではなくクライアント側からのhttpリクエストのURLを修正することで解決できました。

私の問題は、私のリクエストでthis.http.get(this.domain + '/api/prod/' + id).map(res => res.json())

apiの前面に_/_がありませんでした。 _/api_である必要があります

13
EyoelD

localhostを使用する場合は、localhostの前にhttp：//のみを使用します

1
Nagender Chauhan

このエラーが発生する可能性がある別の状況は、インターセプターを使用してベースパスを設定する場合です。次のようなもの：

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

完全なhttp/https URLへの要求がhttpクライアントに提供されたときにこのインターセプターが起動すると、無効なURLが作成されます。

0
Alexei

可能なシナリオ：

  1. Apiの形式が正しくありません。例：http：localhost：8080 /

  2. APIで[〜＃〜] cors [〜＃〜]が有効になっていないため、リクエストを受け付けていません

  3. 末尾に/文字がありません。私の場合はhttp：localhost：808で、/がないため動作しませんでした=最後に

  4. Httpsまたはその反対の代わりにhttpを使用している

  5. APIで資格情報のリクエストを誤って作成しています。これは、フロントエンド部分からのリクエストのコードのエラー（角度、反応、...）が原因で発生する可能性があります。

0
dayanrr91