Why java LONG_MAX is not same with vue axios data?? How to fix that?

I am using java 8 for the backend and Vue CDN(2.5.16) for the front-end. My codes are giving below

BACKEND API:

@RequestMapping(mapping = "/get-long-max", requestMethod = RequestMethod.GET)
private long getLONG() {
  System.out.println(Long.MAX_VALUE);
  return Long.MAX_VALUE;
}

Front-end:

getLongValue() {
  return axios.get('http://localhost:8080/get-long-max.do').
  then(response => {
    console.log(response.data.payload);
    return response.data.payload;
  }).catch(error => console.error(error));
}

Whenever I call the function from the client-side. The Long_MAX is not the same for both ends.
Java system.out shows the value 9223372036854775807 and the front end value is 9223372036854776000.

Please help to fix it. Thanks in advance.

Update 1:

When I hit the URL directly on the browser it seems ok

All longs whose value exceeds plus or minus 2^53 will suffer from this, as the concept 'long' isn't a thing in javascript land / not a thing in JSON, it's all double over there.

One fix is to always pass double, at which point the java side, too, would show 9223372036854776000 (above 2^53 and below -2^53, the distance between any 2 consecutive numbers that the double type can represent is greater than 1.0, i.e. not every integral number is representable any more).

Another is to ensure all your numeric needs fit within -2^53 and +2^53.

A third is to pass all data a strings.

You can see this purely in java code, too:

long x = Long.MAX_VALUE;
double d = x;
System.out.println(x);
System.out.println(d);
System.out.println((long) d);

this prints:

9223372036854775807
9.223372036854776E18
9223372036854775807

<del>I was expecting that last one to be 9223372036854776000, but I guess 2^63-1 does so happen to be a representable double</del> (EDIT: See below), but note that the second print is the e-notation form of the number you are seeing in javascript. Also note this snippet:

long x = Long.MAX_VALUE - 1;
double d = x;
System.out.println(x);
System.out.println(d);
System.out.println((long) d);

this prints:

9223372036854775806
9.223372036854776E18
9223372036854775807

Note how there is now a difference between the first and third print. <del>So, whilst I have no explanation for why you are seeing 9223372036854776000</del>, it's almost certainly because of float/double conversion and rendering issues, and there is no way to fix that; you cannot losslessly convert a long to double or float and back to long, as the second snippet shows, so the solution is not to do that, but, long does not exist in JSON, so you'd have to either avoid the problem range (above and below ±2^53) or transit this data in string form.

EDIT:

I figured out the weirdness inherent in the code examples. Turns out, the double value is in fact 9223372036854776000. However, when you cast that number to a long, you get 9223372036854775807 again - this is in hindsight obvious, as that's the closest long value (it is also the highest possible long value). In fact, long big = (long) 1e300; would also get you that value. As for @Tuhin47 - you need to test the 'path' that your number takes from your java code to your javascript code with something else: This number (9223372036854775807) has the property that if you convert it to a double and then back to a long, that you get the same number back, which means you may think it's working when it really isn't. Use 9223372036854775806, which has the property that if you convert it to a double and back, that you get a different number out.