バックエンドのJava Beanのid属性がbigint型を使用したデータベースの主キーに対応するLong型を使用しているため、JSONモードでフロントエンドにデータを渡すと、フロントエンドが受け取るデータの末尾が0になってしまうという問題が発生します。(精度が落ちる問題が発生)
問題の原因:Javaのlongが表現できる範囲がjsのnumberより大きいため、一部の値がjsに格納できない(不正確な値となり)ため、Idの下数桁がそのまま0になってしまいます。
フロントエンドは以下を受信して出力します。
解決策 1 (バックエンド) : バックエンドの ID を文字列型に変更すると、フロントエンドは精度を失うことなくそれを文字列として受け取ります。
ソリューション 2 (フロントエンド) : フロントエンド ソリューション 1 では、フロントエンドに json-bigint が導入されます。
npm install json-bigint
解決策 3 (フロントエンド) : axios がカプセル化されている場合、transformResponse により、then/catch に渡す前に応答データを変更できます。
axios のソース コードを変更し、node_modules/axios/lib/default.js でtransformResponse を見つけ、その内容を次のように変更します。
transformResponse: [function transformResponse(data) {
/*eslint no-param-reassign:0*/
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) { /* Ignore */ }
}
return data;
}],