web-dev-qa-db-ja.com

Angular HttpClient "解析中のHTTPエラー"

POST 4からAngularバックエンドにLaravelリクエストを送信しようとしています。

私のLoginServiceにはこのメソッドがあります。

login(email: string, password: string) {
    return this.http.post(`http://10.0.1.19/login`, { email, password })
}

LoginComponentでこのメソッドを購読します。

.subscribe(
    (response: any) => {
        console.log(response)
        location.reload()
    }, 
    (error: any) => {
        console.log(error)
    })

そしてこれが私のLaravelバックエンドメソッドです。

...

if($this->auth->attempt(['email' => $email, 'password' => $password], true)) {
  return response('Success', 200);
}

return response('Unauthorized', 401);

私のChrome開発ツールは、私の要求はステータスコード200で成功したと言っています。しかし、私のAngularコードはerrorブロックをトリガーし、このメッセージを私に与えます：

http://10.0.1.19/api/login の解析中のHTTPエラー

私のバックエンドから空の配列を返しても、うまくいきます...それでAngularは私のレスポンスをJSONとして解析しようとしていますか？どうすればこれを無効にできますか？

angulartypescriptangular-httpclient
56
nutzt

responseTypeを使用して、返されるデータがJSONではないではないことを指定できます。

あなたの例では、次のようにresponseTypeという文字列値textを使うことができます。

return this.http.post(
    'http://10.0.1.19/login',
    {email, password},
    {responseType: 'text'})

その他のオプションはjson（デフォルト）、arraybufferおよびblobです。

詳しくは のドキュメント をご覧ください。

125
Kirk Larkin

オプションがある場合

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })
11
Trần Quang Hiệp

ResponseTypeを追加しても、私は何日もの間それに対処しましたが成功しませんでした。ついにできた。あなたのバックエンドのスクリプトであなたが - （ "Content-Type：application/json）;のようにヘッダーを定義しないことを確認してください。

あなたがテキストにそれを回すけれどもバックエンドがjsonを頼むならば、それはエラーを返すでしょう...

2
Shemi

私はAngularアプリケーションで同じ問題に直面していました。私は自分のアプリケーションでRocketChat REST AP​​Iを使用していて、rooms.createDiscussionを使用しようとしていましたが、以下のようにエラーとして発生しました。

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"myurl/rocketchat/api/v1/rooms.createDiscussion","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for myrul/rocketchat/api/v1/rooms.createDiscussion","error":{"error":{},"text":"

私はresponseType: 'text'を変更するようなことをいくつか試しましたが、どれもうまくいきませんでした。最後に、RocketChatのインストールに問題があることがわかりました。 RocketChatの変更履歴 で言及されているように、API rooms.createDiscussionはバージョン1.0.0で導入されました。残念ながら私はより低いバージョンを使用していました。

RESTコードのエラーを修正するために時間を費やす前に、Angular AP​​Iが正常に機能しているかどうかを確認することをお勧めします。それをチェックするためにcurlコマンドを使いました。

curl -H "X-Auth-Token: token" -H "X-User-Id: userid" -H "Content-Type: application/json" myurl/rocketchat/api/v1/rooms.createDiscussion -d '{ "prid": "GENERAL", "t_name": "Discussion Name"}'

そこでも私は応答として無効なHTMLを得ていました。

<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="Origin-when-crossorigin">
<script>/* eslint-disable */

'use strict';
(function() {
        var debounce = function debounce(func, wait, immediate) {

次のように有効なJSONレスポンスの代わりに。

{
    "discussion": {
        "rid": "cgk88DHLHexwMaFWh",
        "name": "WJNEAM7W45wRYitHo",
        "fname": "Discussion Name",
        "t": "p",
        "msgs": 0,
        "usersCount": 0,
        "u": {
            "_id": "rocketchat.internal.admin.test",
            "username": "rocketchat.internal.admin.test"
        },
        "topic": "general",
        "prid": "GENERAL",
        "ts": "2019-04-03T01:35:32.271Z",
        "ro": false,
        "sysMes": true,
        "default": false,
        "_updatedAt": "2019-04-03T01:35:32.280Z",
        "_id": "cgk88DHLHexwMaFWh"
    },
    "success": true
}

そのため、最新のRocketChatに更新した後、前述のREST AP​​Iを使用できました。

0
Sibeesh Venu