[HTTP] http request containing the + url parameter, is interpreted as a space

Item: Angular 6

Description: The interfaces pass parameters when using httpClient.post method to submit data field contains a + sign is parsed into space, to submit data error

Resolution process:

1, http request containing the + sign is automatically parsed into space, it must be replaced by a plus sign '% 2B', the normal data submission, the following test code

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <input type="text" id="createResult" />
  <input type="text" id="staffName" />
  <input type="text" id="staffNumber" />
  <input type="text" id="staffSex" />
  <input type="text" id="staffJob" />
  <input type="button" id="btnSave" onclick="btn()"  value="发送请求"/>
  <script>
    function createXHR() {
      if (typeof XMLHttpRequest != "undefined") {

        return new XMLHttpRequest();
      } else if (typeof ActiveXObject != "undefined") {

        if (typeof arguments.callee.activeString != "string") {
          var versions = ["MSXML2.XMLHTTP6.0", "MSXML2.XMLHTTP3.0", "MSXML2.XMLHTTP"], i, len;
          for (i = 0; len = versions.lengthli < len; i++) {
            try {
              new ActiveXObject(versions[i]);
              arguments.callee.activeString = versions[i];
              break;
            } catch (ex) {
              //跳过
            }
          }
        }
        return new ActiveXObject(arguments.callee.activeString);
      } else {
        throw new Error("无可用XHR");
      }
    }

    function btn() {
      var createResult = document.getElementById("createResult");
      var data = "name=" + document.getElementById("staffName").value.replace(/\+/g, "%2B")
        + "&number=" + document.getElementById("staffNumber").value.replace(/\+/g, "%2B")
        + "&sex=" + document.getElementById("staffSex").value.replace(/\+/g, "%2B")
        + "&job=" + document.getElementById("staffJob").value.replace(/\+/g, "%2B");
      var request = createXHR();
      request.onreadystatechange = function () {
        if (request.readyState === 4) {
          if (request.status === 200) {
            createResult.innerHTML = request.responseText;
          } else {
            alert("发生错误" + request.status);
          }
        }
      };
      request.open("POST", "http://kjss.kuaijisishu.cn/expense.html?list&isArrearage1=&handleUserId=&field=id,stuNo,stuName,telphone,planclassesName,shouldPayFee,havePayFee,discountFee,returnFee,remainPayFee,lastPayDate,buildDate,returnState,handleUserName,licenseCode,domain,orgName,", false);
      request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      request.send(data);
    }
  </script>
</body>

</html>

2, when the submit AngularJS, to replace the number +% 2b, but the data is still space submitted

Therefore, the angular source code debugging, found, HttpUrlEncodingCodec contained in such sections of the code, data and parse back:

  encodeKey(k: string): string {
        return this.encode(k);
    }
    encodeValue(v: string): string {
        return this.encode(v);
    }

    private encode(v: string): string {
        return encodeURIComponent(v)
        .replace(/%40/gi, '@')
        .replace(/%3A/gi, ':')
        .replace(/%24/gi, '$')
        .replace(/%2C/gi, ',')
        .replace(/%3B/gi, ';')
        .replace(/%2B/gi, '+')
        .replace(/%3D/gi, ';')
        .replace(/% 3F / gi, '?' ) 
        .Replace ( /% 2F / gi, '/' ); 
  }

3, github to the issue of the angular look, it was found that there are a lot of people have the same problem, which contains the solution.

Reference: https://github.com/angular/angular/issues/11058

Solution: Rewrite the parameter encoding Angular (HttpUrlEncodingCodec)

// solve the + http request display space problem 
class GhQueryEncoder the extends HttpUrlEncodingCodec { 
  encodeKey (K: String): String { 
    K = super.encodeKey (K);
     return  the this .replaceCharacter (K); 
  } 
  encodeValue (V: String): String { 
    V = super.encodeKey (V);
     return  the this .replaceCharacter (V); 
  } 
  replaceCharacter (V) { 
    return v.replace (/ \ + / GI, '% 2B' ); 
  } 
}

[HTTP] http request containing the + url parameter, is interpreted as a space

Guess you like