API Fetch en Laravel-token

 https://laravel.com/docs/9.x/csrf

https://laravel.com/docs/9.x/csrf

https://www.oscarblancarteblog.com/2017/06/08/autenticacion-con-json-web-tokens/

https://www.purocodigo.net/articulo/aprende-a-utilizar-la-api-fetch-de-javascript

   fetch("/audio/signed", {
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "X-Requested-With": "XMLHttpRequest",
        "X-CSRF-Token": $('input[name="_token"]').val()
      },
      method: "post",
      credentials: "same-origin",
      body: JSON.stringify({
        key: "value"
      })
    })

Personalmente, usar fetch con fines de aprendizaje y luego pasar a una biblioteca de terceros como axios es algo que recomendaría y me he encontrado con muchos desarrolladores que enfrentan lo mismo.

   fetch('/proccess2', {
      headers:{
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      method:'POST',
      body: JSON.stringify(data)
  })

La API de búsqueda, a diferencia de axios, requiere que conviertamos los objetos de JavaScript en una cadena JSON antes de enviarlos. Esto es lo que estamos haciendo en la línea en nuestra parte de encabezados: body: JSON.stringify(todo)..

esto es lo que se publica como una cadena JSON que luego es manejada por nuestra API de Laravel y manejamos la respuesta a partir de entonces.

https://www.purocodigo.net/articulo/aprende-a-utilizar-la-api-fetch-de-javascript

Publicar método ajax para Laravel con Fetch API | Vainilla JS

Tuve dificultades para encontrar un ejemplo de cómo hacer una solicitud de publicación en Laravel a través de la API de búsqueda, ya que la mayoría de los ejemplos usan jQuery solo para acortarlo.

Así que espero que esto eventualmente ayude a alguien.

Lo primero es lo primero, Laravel requiere un token para verificar la falsificación de solicitudes entre sitios . Por lo tanto, debe tener una metaetiqueta en el encabezado con el token, como se explica en la documentación de Laravel.

<meta nombre="csrf-token" content="{{ csrf_token() }}">

Luego, debe enviarlo todo junto con su método de publicación.

//Seleccione el token con getAttribute 
let token = document.querySelector('meta[name=”csrftoken”]').getAttribute('content');//Seleccione los valores de entrada con los datos que desea enviar 
let name = document.querySelector('input[name=”name”]').value; 
let numero = document.querySelector('input[name=”number”]').value;//Defina la URL de su publicación 
let url = '/admin/part/store';//Defina la redirección si es necesario 
let redirigir = '/admin/part/list';//Seleccione su formulario para borrar los datos después de una publicación exitosa 
deje el formulario = document.querySelector('#addPart');

Y luego haga una llamada a la API. Algunas pruebas con contenido diferente en los encabezados me arrojaron algunos errores.

fetch(url, { 
   headers: { 
     "Content-Type": "application/json", 
     "Accept": "application/json, text-plain, */*", 
     "X-Requested-With": "XMLHttpRequest", 
     "X-CSRF-TOKEN": token 
    }, 
   método: 'publicación', 
   credenciales: "mismo origen", 
   cuerpo: JSON.stringify({ 
     nombre: nombre, 
     número: número 
   }) 
  }) 
   .then((datos) = > { 
       formulario.reset(); 
       ventana.ubicación.href = redirigir; 
   }) 
  .catch(función(error) { 
      consola.log(error); 
    }); 
  }

Sería genial tener algo de resaltado de sintaxis aquí, ¿eh?