我使用Laravel作为后端，NextJs作为前端。问题是在发送表格的时候
我从服务器得到以下响应：error
正确获取csrf令牌，它与cookie中的存储相匹配。
web file.php中的路径为Route::post('/administracion/nuevo-producto', [ProductosController::class, 'store'])->name('productos');
ProductoController包括return response()->json(['message' => 'Datos guardados exitosamente']);
Cors.php:
'paths' => ['api/*', 'getCsrf'],
'allowed_methods' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'],
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
'allowed_origins_patterns' => [],
'allowed_headers' => ['Content-Type', 'Authorization', 'x-xsrf-token'], // Agregamos 'X-Xsrf-Token' aquí
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,在kernel.php包含\App\Http\Middleware\VerifyCsrfToken::class
我在NextJS中的组件
import Head from 'next/head'
import { useAuth } from '@/hooks/auth'
import { router } from 'next/router'
import { useEffect, useState } from 'react'
import AppLayout from '@/components/Layouts/AppLayout'
import axios from 'axios'
export default function adminIndex() {
const { user } = useAuth()
const rolesAutorizados = [1]
useEffect(() => {
if (user) {
if (!rolesAutorizados.includes(user.id_rol)) {
router.push('/dashboard')
}
}
}, [user])
function getCookie(name) {
if (typeof document !== 'undefined') {
const cookies = document.cookie.split(';')
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim()
if (cookie.startsWith(name + '=')) {
return cookie.substring(name.length + 1)
}
}
}
return null
}
const [nombre, setNombre] = useState('');
const handleSubmit = async e => {
e.preventDefault()
try {
// Crea un objeto con los datos del formulario
const formData = {
nombre,
}
// Agrega el token CSRF al encabezado de la solicitud
const headers = {
'X-XSRF-TOKEN': getCookie('XSRF-TOKEN'),
}
// Realiza la solicitud POST a tu servidor Laravel
const response = await axios.post('/administracion/nuevo-producto', formData, {
headers,
})
// Maneja la respuesta del servidor si es necesario
console.log('Respuesta del servidor:', response.data)
} catch (error) {
console.error('Error al enviar la solicitud:', error)
}
}
return (
<>
<AppLayout
header={
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Nuevo producto
</h2>
}>
<Head>
<title> Nuevo producto - Mar Nails</title>
</Head>
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
<form onSubmit={handleSubmit}>
{/* Campos del formulario */}
<div>
<label>Nombre:</label>
<input type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} />
</div>
{/* ...otros campos del formulario */}
<button type="submit">Enviar</button>
</form>
</div>
</div>
</div>
</div>
</AppLayout>
</>
)
}储存方法：
public function store(Request $request)
{
$producto = new producto();
$producto->nombre = $request->input('nombre');
$producto->descripcion = $request->input('descripcion');
$producto->precio = $request->input('precio');
$producto->stock = $request->input('stock');
$producto->estado = $request->input('estado');
//para guardar la imagen
if ($request->hasFile('imagen')) {
$extension = $request->file('imagen')->getClientOriginalExtension(); //obtengo el tipo de extension
$nombreSinEspacios = str_replace(' ', '', $request->input('nombre')); //saco los espacios para evitar problemas
$nombreImagen = $nombreSinEspacios . '.' . $extension; //armo el nuevo nombre del archivo agregandole la extension
$path = $request->file('flyer')->storeAs('/productos', $nombreImagen, 'public'); //subo a /productos la imagen
$producto->url_imagen = $path; //guardo en la bd la url a la imagen
}
//para guardar la ciudad
$ciudad = Ciudad::find($request->input('id_ciudad'));
$producto->id_ciudad()->associate($ciudad);
$producto->save();
return response()->json(['message' => 'Datos guardados exitosamente'], 200);
}
1条答案
按热度按时间piok6c0g1#
您的Axios头文件不包含与Laravel进行JSON通信所需的头文件。将此添加到您的Axios头配置：
这样Laravel就会知道它需要以JSON格式响应你。它可能不会解决根本问题，但至少你会得到JSON响应。