419 Unknown Status on sending POST request

Question

I encountered an error while sending a POST request using Axios in my React application to retrieve data from a remote server.

The browser console displays the following error message:

xhr.js:258 POST http://80.72.180.130:8581/api/calculate/horizontal/buffer/zone 419 (unknown status)

Additionally, in the catch block, I have an error in the following format:

Error fetching data: AxiosError {message: 'Request failed with status code 419', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

Here is my code:

import React, { useState, useEffect } from 'react';
import Chart from 'react-apexcharts';
import axios from 'axios';

const CalculateChart = ({ selectedYear, selectedDistrict }) => {
    const [chartData, setChartData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.post('http://80.72.180.130:8581/api/calculate/horizontal/buffer/zone', {
                    "cost": 18448000,
                    "district": selectedDistrict,
                    "year": selectedYear.toString()
                });
                setChartData(response.data.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, [selectedYear, selectedDistrict]);

    if (!chartData) {
        return <p>Loading...</p>;
    }

    const { distances, items } = chartData;

    const formattedItems = items.map(item => parseFloat(item));

    const chartSeries = [
        {
            name: 'Items',
            data: formattedItems
        }
    ];

    const chartOptions = {
        chart: {
            id: 'line-chart',
            toolbar: {
                show: false
            }
        },
        xaxis: {
            categories: distances,
            title: {
                text: 'Distance (m)',
                style: {
                    fontSize: '14px',
                    fontWeight: 'bold',
                    fontFamily: 'Arial, sans-serif'
                }
            }
        },
        yaxis: {
            title: {
                text: 'Item',
                style: {
                    fontSize: '14px',
                    fontWeight: 'bold',
                    fontFamily: 'Arial, sans-serif'
                }
            }
        }
    };

    return (
        <Chart type='line' width={1200} height={550} series={chartSeries} options={chartOptions} />
    );
};

export default CalculateChart;

I have already tried to make sure that the data being sent is correct, and also to check the server configuration. However, the problem remains unresolved.

enter image description here