Access-Control-Allow-Origin is missing laravel-9 and vuejs3 - laravel

Question

I have a vue3-frontend and a laravel9-backend. I want to send data to the backend using the fetch-api in vue and get the response but unfortunately I get this error message when I click the submit button. Does anyone have an idea how I can solve the problem ?
I tried the fruitcake/laravel-cors library but it still did not work
error 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-code
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);
})
}
}
controlelr code laravel
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
];
}
Thanks:)

Answer 1

Create new middleware called Cors, inside of it, put this code:
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => "*",
'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS',
'Access-Control-Allow-Headers' => 'Content-Type, X-Auth-Token, Origin',
];
if ($request->getMethod() == "OPTIONS") {
return \Response::make('OK', 200, $headers);
}
$response = $next($request);
foreach ($headers as $key => $value)
$response->header($key, $value);
return $response;
}
Go to App\Http\Kernel.php, in the protected $middleware array, add this:
\App\Http\Middleware\Cors::class,
and inside protected $routeMiddleware array, add this:
'cors' => \App\Http\Middleware\Cors::class,
In your Route file, add this:
Route::middleware(['cors'])->group(function(){
//your route here
});
Run this command inside your laravel folder:
php artisan optimize:clear