オタブロ > IT知識 > PHP > 【Laravel】CORSエラー「No ‘Access-Control-Allow-Origin’ header is present on the requested resource」対策

【Laravel】CORSエラー「No ‘Access-Control-Allow-Origin’ header is present on the requested resource」対策

IT知識

ReactでLaravelのApiたたいたらコンソールでCORSエラー

Access to fetch at 'http://localhost/api/todos' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

「フェッチするためのアクセスがCORSポリシーによってブロックされました。」と怒られています。

このエラーは「http://localhost:3000」「 http://localhost」の違うオリジン同士でやり取りをしようとしたときに出ることがあります。

Laravel側で設定が必要なので、「bootstrap/app.php」の一番上に下記を追加します。

<?php
header('Access-Control-Allow-Origin: http://localhost:3000'); //   <= 追記
/*
|--------------------------------------------------------------------------
| Create The Application
|--------------------------------------------------------------------------
|
| The first thing we will do is create a new Laravel application instance
| which serves as the "glue" for all the components of Laravel, and is
| the IoC container for the system binding all of the various parts.
|
*/

$app = new Illuminate\Foundation\Application(
    $_ENV['APP_BASE_PATH'] ?? dirname(__DIR__)
);

/*
|--------------------------------------------------------------------------
| Bind Important Interfaces
|--------------------------------------------------------------------------
|
| Next, we need to bind some important interfaces into the container so
| we will be able to resolve them when needed. The kernels serve the
| incoming requests to this application from both the web and CLI.
|
*/

$app->singleton(
    Illuminate\Contracts\Http\Kernel::class,
    App\Http\Kernel::class
);

$app->singleton(
    Illuminate\Contracts\Console\Kernel::class,
    App\Console\Kernel::class
);

$app->singleton(
    Illuminate\Contracts\Debug\ExceptionHandler::class,
    App\Exceptions\Handler::class
);

/*
|--------------------------------------------------------------------------
| Return The Application
|--------------------------------------------------------------------------
|
| This script returns the application instance. The instance is given to
| the calling script so we can separate the building of the instances
| from the actual running of the application and sending responses.
|
*/

return $app;
タイトルとURLをコピーしました