vue3 프론트엔드와 라라벨9 백엔드가 있습니다.vue에서 fetch-api를 사용하여 백엔드로 데이터를 전송하고 응답을 받고 싶은데 아쉽게도 제출 버튼을 클릭하면 이 오류 메시지가 나타납니다.내가 그 문제를 어떻게 해결할 수 있는지 아는 사람 있나요?
과일케익/라벨코어 라이브러리를 사용해 봤지만 아직 작동하지 않았다.
from firefox de tool](https://i.stack.imgur.com/SCcqL.png)에서 오류 발생)
<?php
return [
/*
--------------------------------------------------------------------------
Cross-Origin Resource Sharing (CORS) Configuration
--------------------------------------------------------------------------
Here you may configure your settings for cross-origin resource sharing
or "CORS". This determines what cross-origin operations may execute
in web browsers. You are free to adjust these settings as needed.
To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
*/
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];
vuejs 코드
methods: {
registerUser() {
fetch("http://localhost:8000/api/tippspiel/register", {
method: "POST",
body: JSON.stringify({
email: this.email,
username: this.username,
password: this.password,
passwordConfirmation: this.passwordConfirmation,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
}).then((response) => {
return response.json();
}).then((data) => {
console.log(data);
})
}
} controllr 코드라벨
public function register(Request $request)
{
$data = $request->validate([
"email" => "required email",
"username" => "required min:6 max:15",
"password" => "required min:12 max:40",
"passwordConfirmation" => "required same:password",
"ageCheck" => "required accepted",
"privacyCheck" => "required accepted"
]);
return [
"status" => "ok",
"id" => 1,
"username" => $request->username
];
} 감사합니다.