Laravel Sanctum对接React Axios出现419 CSRF Token不匹配问题求助

近几日被一个问题卡得难受：我没法完成基于Laravel Sanctum的React单页应用（用Axios）的身份验证。翻了官方文档、一堆教程和相关问题，解决了部分问题，但最后卡在这：请求明明带了X-CSRF-TOKEN，却一直返回419错误，提示CSRF token mismatch。

错误详情：返回419状态码，明确提示CSRF令牌不匹配。

以下是我的相关配置代码：

cors.php #

<?php

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

App.js（React应用） #

import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Login from './components/auth/login';
import Register from './components/auth/register';

import axios from 'axios';

axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['Accept'] = 'application/json';
axios.defaults.withCredentials = true;

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/login" element={<Login />} />
          <Route path='/register' element={<Register />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

register.js #

import React, { useState } from "react";
import axios from "axios";

import '../../css/login2.css'
import '../../css/login3.css'

function Register() {

    const [register, setRegister] = useState({
        email: '',
        password: '',
        confirmPassword: ''
    });

    const handleInput = (e) => {
        e.persist();
        setRegister({
            ...register,
            [e.target.name]: e.target.value
        })
    }

    const submit = (e) => {
        e.preventDefault();
        const data = {
            email: register.email,
            password: register.password,
            confirmPassword: register.confirmPassword
        }
        axios.get('/sanctum/csrf-cookie').then(response => {
            console.log(response);
            axios.post('/api/register', data).then(res => {
                console.log("res: "+res);
            }).catch(err => {
                console.log("err"+err);
            })
        })
    }

    return (
        <section className="section-register d-flex justify-content-center align-items-center">
            <div className="box" style={{ width: "20rem", }}>
                <h3 className="text-center font-weight-bold mb-4">Register</h3>
                <form onSubmit={submit}>
                    <div className="form-group">
                        <input type="email" onChange={handleInput} className="form-control" placeholder="Email Address"
                            name="email" />
                    </div>
                    <div className="form-group">
                        <input type="password" onChange={handleInput} className="form-control"
                            placeholder="Password" name="password" />
                    </div>
                    <div className="form-group">
                        <input type="password" onChange={handleInput} className="form-control"
                            placeholder="Confirm Password" name="password_confirmation" />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary btn-block btn-rounded">Continue</button>
                    </div>
                </form>
                <div className="or mt-4 mb-4">
                    <span className="">OR</span>
                </div>
                <div className="text-center">
                    <a href="/login" className="btn btn-outline-primary btn-rounded clever"
                        style={{ textDecoration: "none !important", }}>Login</a>
                </div>
            </div>
        </section>
    );
}

export default Register;

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