React中Axios发送POST请求遇419 Unknown Status错误求助

错误核心原因 #

419状态码大多出现在Laravel这类后端框架的场景中，本质是CSRF令牌验证失败——这类框架默认会对POST请求做CSRF校验，缺少有效令牌就会返回该错误。

可行解决方案 #

1. 在请求中携带CSRF令牌 #

如果后端是Laravel，可按以下步骤修改代码：

• 从页面meta标签获取后端输出的CSRF令牌（Laravel默认会生成<meta name="csrf-token" content="令牌内容">）
• 在Axios请求的headers中添加X-CSRF-TOKEN字段

修改后的完整代码：

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 {
                // 获取CSRF令牌
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
                if (!csrfToken) {
                    throw new Error('CSRF令牌未找到');
                }
                const response = await axios.post(
                    'http://80.72.180.130:8581/api/calculate/horizontal/buffer/zone',
                    {
                        "cost": 18448000,
                        "district": selectedDistrict,
                        "year": selectedYear.toString()
                    },
                    {
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        }
                    }
                );
                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;

2. 后端临时豁免CSRF校验（仅测试环境） #

开发测试阶段，可让后端在对应接口关闭CSRF验证，比如Laravel中修改app/Http/Middleware/VerifyCsrfToken.php：

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    protected $except = [
        '/api/calculate/horizontal/buffer/zone', // 添加该接口路径
    ];
}

⚠️ 注意：生产环境绝对不能使用此方式，会引发安全风险。

3. 全局配置Axios令牌 #

在项目入口文件（如index.js）中全局设置Axios的请求头，避免每个请求重复编写：

import axios from 'axios';

// 全局配置CSRF令牌和接受类型
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]')?.content;
axios.defaults.headers.common['Accept'] = 'application/json';

额外排查项 #

• 确认后端跨域配置允许当前前端域名/端口访问
• 检查CSRF令牌是否过期，部分框架会定期刷新令牌
• 确认请求体格式符合后端要求，Axios默认会以JSON格式发送，若后端要求表单格式需修改Content-Type为application/x-www-form-urlencoded

内容的提问来源于stack exchange，提问作者Emirlan