項目技術：Angular 6
問題現象：接口傳參的時候，使用 httpClient.post 方法提交數據，字段中包含+號被解析成空格，提交數據錯誤
解決過程：
1、http請求中包含+號，會被自動解析成空格，必須將加號替換成 '%2B'，則數據提交正常，如下測試代碼
<!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、在angularjs提交時，將+號replace成%2b，但提交的數據仍然是空格
所以，調試angular源碼，發現,HttpUrlEncodingCodec 中包含這么段代碼，將數據又解析回去：
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、到angular的github的 issue中找，果然發現有很多人有同樣的問題，其中有包含解決方案。
參考資料：https://github.com/angular/angular/issues/11058
解決方案：重寫Angular的參數編碼方式（HttpUrlEncodingCodec ）
//解決http請求+號顯示空格問題 class GhQueryEncoder extends HttpUrlEncodingCodec { encodeKey(k: string): string { k = super.encodeKey(k); return this.replaceCharacter(k); } encodeValue(v: string): string { v = super.encodeKey(v); return this.replaceCharacter(v); } replaceCharacter(v) { return v.replace(/\+/gi, '%2B'); } }