【Angular】HTTPリクエスト送信時のパラメータがおかしい。

【Angular】HTTPリクエスト送信時のパラメータがおかしい。

AngularのURLエンコードがおかしい

AngularのURLを送信する時、HttpParamsを使います。

この関数の中のset関数を呼び出すことによってエンコードして投げていたのですが、

プラス「＋」が欠けてしまう事象が発生。

何故・・・？と思い調べていただ以下のサイトに遭遇。

qiita.com

原因は、RFC3986に準拠しているので「@$:,;+=?/」はエンコードされない。

qiitaに詳しくかいてあるが抜粋すると、

• HttpParams はエンコードをしていないように見えるが、実際には RFC3986 に従ってエンコードを行っている
• 実装としては encodeURIComponent() したあとに @$:,;+=?/ をデコードしている

とのこと。

解決方法

エンコーダーを対応しているものに実装しましょう。

実装といっても、Angularが用意している「HttpParameterCodec」を使えばOKです。

browserStandardEncoder.ts

import { HttpParameterCodec } from '@angular/common/http';
export class BrowserStandardEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

実際に使うファイルには

   import { BrowserStandardEncoder } from './browserStandardEncoder';
   let params = new HttpParams({encoder: new BrowserStandardEncoder()});
    params = params.append("date", new Date().toISOString());
    console.log(params.toString()); // date=2019-12-06T04%3A30%3A45.959Z

みたいな感じですね。先人の知恵に本当に助けられました。