访问-控制-允许-原产地丢失了laravel-9和vuejs3

Question

我有第三首和第九部。我希望使用vue中的fetch-api将数据发送到后端，并获得响应，但不幸的是，当我单击submit按钮时，我得到了这个错误消息。有人知道我怎么解决这个问题吗？

我试过水果蛋糕/拉拉库尔图书馆，但仍然没有用。

来自firefox de工具的错误](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);
      })
    }
  }

控制码

    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
        ];
    }

谢谢：)

Answer 1

创建新的中间件，名为Cors，在其中放置以下代码：

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

转到protected $middleware数组中的protected $middleware，添加以下内容：

\App\Http\Middleware\Cors::class,

在protected $routeMiddleware数组中，添加以下内容：

'cors' => \App\Http\Middleware\Cors::class,

在“路由”文件中，添加以下内容：

Route::middleware(['cors'])->group(function(){
    //your route here
});

在laravel文件夹中运行以下命令：

php artisan optimize:clear