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

Question

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?

reallynice · Accepted Answer · 2022-03-26 14:46:13Z

7

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"]').content;

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

edited Mar 26, 2022 at 14:46

reallynice

1,3032 gold badges22 silver badges43 bronze badges

answered Nov 1, 2020 at 12:31

Luis Montoya

3,2171 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cogis · Accepted Answer · 2022-03-25 17:38:06Z

1

Here is a working example

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

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

 fetch('/url', {
        method: 'post',
        body : JSON.stringify({
            key: 'value'
        }),
         headers: {
             "Content-Type": "application/json",
             "X-CSRF-TOKEN'": token
         },
    });

edited Mar 25, 2022 at 17:38

answered Mar 25, 2022 at 17:32

cogis

213 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related