我是 React js 新手，正在尝试使用 Laravel API Sanctum 通过我的 React JS 前端将新用户注册到我的数据库中，但出现此错误：
Request failed with status code 419
AxiosError: Request failed with status code 419
at settle (http://localhost:3000/static/js/bundle.js:80917:12)
at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:79599:66)
我的 UserAPIController.php laravel 文件
<?php
namespace App\Http\Controllers\API;
use App\Models\User;
use Validator;
use Illuminate\Support\Facades\Hash;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class ApiV1UserController extends Controller
{
public function register(Request $request){
$validator = Validator::make($request->all(),[
'name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'mobile' => ['required', 'string', 'min:10'],
'password' => ['required', 'string', 'min:8']
// 'password' => ['required', 'string', 'min:8', 'confirmed']
]);
if($validator->fails()){
return response()->json(['validation_errors'=>$validator->messages()],422);
}else{
$user = User::create([
'name'=>$request->name,
'email'=>$request->email,
'mobile'=>$request->mobile,
'password'=>Hash::make($request->password),
]);
$token = $user->createToken($user->email.'_Token')->plainTextToken;
return response()->json([
"status"=>true,
"username"=>$user->name,
"token"=>$token,
"message"=>"User Registered Succesfully!"
],201);
}
}
}
我的 Register.js 反应文件
import React, { useState, useRef } from "react";
import { useNavigate, BrowserRouter as Router } from "react-router-dom";
import { Routes, Route } from "react-router";
import { Link } from "react-router-dom";
import axios from "axios";
import swal from "sweetalert";
import { aslInterpreting, snowflakeO } from "fontawesome";
function Register() {
const navigate = useNavigate();
const [registerInput, setRegister] = useState({
name: "",
email: "",
mobile: "",
password: "",
error_list: [],
});
const handleInput = (e) => {
e.persist();
setRegister({ ...registerInput, [e.target.name]: e.target.value });
};
const registerSubmit = (e) => {
e.preventDefault();
const data = {
name: registerInput.name,
email: registerInput.email,
mobile: registerInput.mobile,
password: registerInput.password,
};
axios.get("/sanctum/csrf-cookie").then((response) => {
axios.post(`/api/register`, data).then((res) => {
if (res.data.status === 201) {
localStorage.setItem("auth_token", res.data.token);
localStorage.setItem("auth_name", res.data.username);
swal("Success", res.data.message, "success");
navigate("/");
} else {
setRegister({
...registerInput,
error_list: res.data.validation_errors,
});
}
});
});
};
return (
<section className="login-box">
<div className="container">
<div className="row">
<div className="col-lg-3"></div>
<div className="col-lg-6">
<div className="input-box">
<header>Create Account</header>
<form onSubmit={registerSubmit}>
<div className="input-field">
<input
type="text"
className="input"
onChange={handleInput}
value={registerInput.name}
name="name"
id="name"
/>
<label>Full Name</label>
<span className="text-danger">
{registerInput.error_list.name}
</span>
</div>
<div className="input-field">
<input
type="email"
className="input"
onChange={handleInput}
value={registerInput.email}
name="email"
id="email"
/>
<label>Email</label>
<span className="text-danger">
{registerInput.error_list.email}
</span>
</div>
<div className="input-field">
<input
type="text"
className="input"
onChange={handleInput}
value={registerInput.mobile}
name="mobile"
id="mobile"
/>
<label>Mobile</label>
<span className="text-danger">
{registerInput.error_list.mobile}
</span>
</div>
<div className="input-field">
<input
type="password"
className="input"
onChange={handleInput}
value={registerInput.password}
name="password"
id="password"
/>
<label>Password</label>
<span className="text-danger">
{registerInput.error_list.password}
</span>
</div>
<div className="ps-2 pb-3">
<input type="checkbox" className="me-1" name="" id="" />
<Link to="/terms-conditions">
Agree to our terms and conditions
</Link>
</div>
<div className="input-field">
<button type="submit" className="login-submit">
Register
</button>
</div>
</form>
<div className="signin">
<div className="signup pb-2">
<span>
<Link to="/login">Already has an account?</Link>
</span>
</div>
<span className="pb-2">
<Link to="#">Forgot password?</Link>
</span>
</div>
</div>
</div>
<div className="col-lg-3"></div>
</div>
</div>
</section>
);
}
export default Register;
还有我的 App.js 反应文件
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Routes, Route } from "react-router";
import axios from "axios";
import "./App.css";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Home from "./components/Home";
import Products from "./components/Products";
import Login from "./components/Login";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";
axios.defaults.baseURL = "http://jaano.test";
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>
<Navbar />
<Routes>
<Route exact path="/" element={<Home />}></Route>
<Route exact path="/products" element={<Products />}></Route>
<Route exact path="/login" element={<Login />}></Route>
<Route exact path="/register" element={<Register />}></Route>
<Route exact path="/dashboard" element={<Dashboard />}></Route>
<Route exact path="/profile" element={<Profile />}></Route>
</Routes>
<Footer />
</Router>
</div>
);
}
export default App;
我在控制台中收到此错误
{消息：“CSRF 令牌不匹配。”，异常：“Symfony\Component\HttpKernel\Exception\HttpException”，…} 例外 : “Symfony\Component\HttpKernel\Exception\HttpException” 文件 : “D：\ xampp \ htdocs \ jaano \ jaanobackend endor \ laravel ramework \ src \ Illuminate \ Foundation \ Exceptions \ Handler.php” 线 : 第389章 信息 : “CSRF 令牌不匹配。”
Any help?
csrf token error in laravel sanctum API and react js
您需要在 axios 调用中传递 CSRF 标头。您可以使用拦截器来做到这一点。
axios.interceptors.request.use(
(config) => {
const newConfig = config;
if (cookie.parse(document.cookie)["XSRF-TOKEN"]) {
newConfig.headers!["X-XSRF-TOKEN"] = cookie.parse(document.cookie)[
"XSRF-TOKEN"
];
}
return newConfig;
},
(err) => {
return Promise.reject(err);
}
);
完成此操作后，请仔细检查登录/注册请求是否使用 XSRF-TOKEN 标头。