How to get Laravel CSRF-token for sending it through fetch post request in React?

Kiazim Khutaba

I'm developing web-app using create-react-app and Laravel. create-react-app runs dev project on localhost:3000, whereas laravel backend works on localhost:8080. This is part of my code:

const onSubmit = (e) => {
    e.preventDefault();

    const val = rootRef(formRef); // React ref to form
    
    // form data
    const data = {
        firstName: val('firstName'),
        lastName: val('lastName'),
        facultyId: val('facultyId'),
        departmentId: val('departmentId'),
        courseNo: val('courseNo'),
        phoneNumber: val('phoneNumber'),
        emailInput: val('email'),
        password: val('password')
    }

    const request = {
        method: "POST",
        // mode:   "cors",
        // cache:  "no-cache",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    }

    fetch('http://localhost:8080/signup', request)
        .then(res => res.json())
        .then(console.log)
}

So, when I submit the form I'm getting 419 unknown status. I've read laravel docs and found that this happens, because POST request doesn't contain csrf token. Laradocs says (for axios):

If you are not using this library, you will need to manually configure this behavior for your application

But how to make same thing for create-react-app based project?

Luis Fernando Montoya

Put this in your main blade view

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

Then, capture the csrf token value via JS And pass it in the headers

const token = document.head.querySelector('meta[name="csrf-token"]');

headers: {
  "Content-Type": "application/json".
  "X-CSRF-TOKEN'": token
},

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

sending post request using fetch to Golang server

Laravel csrf token mismatch for ajax POST Request

How to pass along CSRF token in an AJAX post request for a form?

Invalid CSRF Token in POST request

How to add Django's CSRF token to the header of a jQuery POST request?

Not able to authenticate post request for CSRF token with tomcat

CSRF token mismatch exception in ajax post request in laravel 5.3 on localhost

REACT fetch post request

How to pass token in ajax post request laravel?

Sending POST request with Guzzle in Laravel

How to POST to Laravel API with CSRF Token?

CSRF token mismatch in post request in 3.6 version

laravel 7 api CSRF token mismatch on POST request

Django, react & fetch - submitting CSRF token on post request

Laravel is sending GET instead of POST request

How to fetch the $_GET or $_POST value for a Laravel Query

Sending post request to PayPal to get access token in Django

Sending passwords through GET request

Two part post request to get CSRF Token then make another request

POST request made with CSRF token through multipart form is giving 404 error on production but working on localhost

How to prevent CSRF attack through Anti Forgery GET request

How set up headers in ajax POST request to include CSRF token

How to obtain csrf token for a python POST request to Django server

Sending POST request with GET parameter in Laravel

How to send x-csrf-token in a GET request?

get Access Token before sending GET or POST request

How do send my JWT token when I make a GET/POST request to the api endpoint through UI?

How to pass Laravel CSRF token to Service Worker so i can make a POST request?

CSRF token mismatch for every post request Laravel 9