Angular HttpClient「解析中のHttpエラー」

105

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

私の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として解析しようとしていますか？これを無効にするにはどうすればよいですか？

angular typescript angular-httpclient

— nutzt
ソース

230

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

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

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

のオプションの完全なリストresponseTypeは次のとおりです。

json （デフォルト）
text
arraybuffer
blob

詳細については、ドキュメントを参照してください。

— カーク・ラーキン
ソース

17

オプションがある場合

return this.http.post(`${this.endpoint}/account/login`,payload, { ...options, responseType: 'text' })

— TrầnQuangHiệp
ソース

3

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

テキストに変換してもバックエンドがjsonを要求すると、エラーが返されます...

— シェミ
ソース

また、新しいクラスから派生した新しいオブジェクトにパラメーターとして設定することもできます。次に、このオブジェクトを応答として返します。つまり、応答をJSON形式に変更できます

— whitefang

1

また、JSONも確認する必要があります（DevToolsではなく、バックエンドで）。\0文字とDevToolsでJSONを解析するのに苦労しているAngular HttpClientはそれを無視するため、Chromeで見つけるのは非常に困難です。

この記事に基づく

— druss
ソース

1

私は同じ問題を抱えていましたが、その原因は、バックエンド（スプリング）で文字列を返すときに、「使用済みのスプリング」として返されている可能性があることでした。しかし、これは春によれば正しく解析されていません。代わりにreturn "\" spring used \ ""を使用してください。 -ピースアウト

— AVI
ソース

口コミから：こんにちは、この投稿は質問に対する質の高い回答を提供していないようです。回答を編集して改善するか、コメントとして投稿してください。

— sɐunıɔןɐqɐp

よし、SOなど。私の状況では、バックエンドとしてSpringを使用し、フロントエンドでAngularを使用していました。正しい認証の後、私のスプリングサーバーは文字列「valid」を返さなければなりません。これは、ログイン情報が正しい場合にのみ処理されます。

— AVI

私のプログラムの問題は同様でした。解析中のHttpの失敗....その後、春は「サーバーの応答を特殊文字として考慮している」と気づきました。そのため、バックエンドも理解できる文字列を返さなければなりませんでした。 "valid"の代わりに\表記を使用して、 "" ""}の代わりに文字列{"\" \ ""の逆コンマの内側に書き込まれる "（逆コマ）"を指定します。そして、そのエラーの後seen..I希望のより明確になりました@sɐunıɔןɐqɐpどこにもなかった

— AVI

0

Angularアプリケーションでも同じ問題に直面していました。アプリケーションでRocketChat REST APIを使用していて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で導入されましたが、残念ながら以前のバージョンを使用していました。

Angularコードのエラーを修正するために時間をかける前に、REST APIが正常に機能しているかどうかを確認することをお勧めします。使った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 APIを使用することができました。

— シビーシュヴェヌ
ソース