POST https://example.com/api/payment/verify net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

I am facing this error when I run this code on a Linux server, but the code seems to work fine in the local host.

the error points me to fetch inside the function laSt in the following code.

and then I also get a Uncaught (in promise) TypeError: Failed to fetch in this line return response.json(); inside that function only.

<p style="font-family: 'Manrope', sans-serif; padding-left: 10px;"> Please wait while we fetch you the payment snippet.</p>

<div class="">
<input style="visibility: hidden;" type="text" id="rzp-text">
<button class="buttonDes" id="order-button1">Click to proceed</button>
</div>
<div id="paymentDetails"></div>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>

    document.getElementById("order-button1").addEventListener('click', laSt);
  
    //document.getElementById("order-button1").onclick = laSt();

      async function laSt(){
        let url = '/api/payment/verify';
        let params = {
          razorpay_order_id: document.getElementById('order-id').value,
          razorpay_payment_id: document.getElementById('order-pay-id').value,
          razorpay_signature: document.getElementById('order-sig').value
        };

        await fetch(url, {
          method: 'POST', // or 'PUT'
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(params); // body data type must match "Content-Type" header
        }).then(function (response) {
          return response.json();
        }).then(function (muutuja) {
          document.getElementById('success').value = muutuja.status;
          console.log(muutuja.status);
          });
        return goToUrl();
      }

  function goToUrl(){
    if(document.getElementById('success').value === 'success'){
      window.location = "https://example.com/success" || "https://www.example.com/success" || process.env.port + '/success'
      //redirect to orders
    } else if (document.getElementById('success').value === 'failure') {
      window.location = 'https://example.com/checkout' || "https://www.example.com/checkout" || process.env.port + '/checkout'
    }
  }
</script>

<div style="visibility: visible;">


<label for="">Order id :</label>
<input type="text" id="order-id">
<label for="">Payment id :</label>
<input type="text" id="order-pay-id">
<label for="">Order signature :</label>
<input type="text" id="order-sig">

<input type="text" id="success">
</div>


<%- include ('../partials/footer'); -%>

this is what the backend code looks like

router.post("/api/payment/verify", (req, res) => {
  body = req.body.razorpay_order_id + "|" + req.body.razorpay_payment_id;
  let expectedSignature = crypto
  .createHmac("sha256", 'thisisanincorrectkey').update(body.toString())
  .digest("hex");
  let response = {status: "failure"};
  console.log(expectedSignature + " " + req.body.razorpay_signature);
  if(expectedSignature === req.body.razorpay_signature){
    response = {status: "success"};
      }
   res.send(response);
});