如何获取 Laravel CSRF-token 以通过 React 中的 fetch post 请求发送它?

2024-01-22

我正在使用开发网络应用程序创建反应应用程序和拉维尔。创建反应应用程序在 localhost:3000 上运行开发项目,而 laravel 后端在 localhost:8080 上运行。这是我的代码的一部分:

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)
}

所以,当我提交表格时,我得到419 未知状态。我读过 laravel 文档,发现发生这种情况,因为 POST 请求不包含csrf令牌。 Laradocs 说(对于 axios):

如果您不使用此库,则需要为您的应用程序手动配置此行为

但如何做同样的事情创建反应应用程序基础项目?


将其放入您的主刀片视图中

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

然后,通过JS捕获csrf token值并将其传递到标头中

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

headers: {
  "Content-Type": "application/json",
  "X-CSRF-TOKEN": token
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取 Laravel CSRF-token 以通过 React 中的 fetch post 请求发送它? 的相关文章

随机推荐