我正在使用开发网络应用程序创建反应应用程序和拉维尔。创建反应应用程序在 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(使用前将#替换为@)