create-react-app 및 Laravel을 사용하여 웹 앱을 개발 중입니다. create-react-app 은 localhost : 3000에서 dev 프로젝트를 실행하는 반면 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 unknown status가 표시 됩니다. laravel 문서를 읽었으며 POST 요청에 csrf 토큰이 포함되어 있지 않기 때문에 이런 일이 발생한다는 것을 알았습니다 . Laradocs는 말합니다 (axios 용) :
이 라이브러리를 사용하지 않는 경우 애플리케이션에 대해이 동작을 수동으로 구성해야합니다.
그러나 create-react-app 기반 프로젝트 에 대해 동일한 것을 만드는 방법은 무엇입니까?
이것을 메인 블레이드 뷰에 넣으십시오.
<meta name="csrf-token" content="{{ csrf_token() }}">
그런 다음 JS를 통해 csrf 토큰 값을 캡처하고 헤더에 전달합니다.
const token = document.head.querySelector('meta[name="csrf-token"]');
headers: {
"Content-Type": "application/json".
"X-CSRF-TOKEN'": token
},
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다