web-dev-qa-db-ja.com

ReactアプリとLaravel APIの場合のCORSの問題

Reactアプリは http：// localhost：3000 / にあり、Laravel APIは http：// localhost/blog/public/api /
次のエラーが発生します

Origin ' http：// localhost：30 'から ' http：// localhost/blog/public/api/auth/signin 'でフェッチするためのアクセスは、 CORSポリシー：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。不透明な応答でニーズが満たされる場合は、リクエストのモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。

Error Screenshot

これが応答ヘッダーです：-

Response Headers Screenshot

私はhtaccess経由で試しました https://packagist.org/packages/barryvdh/laravel-cors

javascriptphpreactjslaravelcors
4
Nitin Soni

Laravel CORSエラーなしでAPIにアクセスするには、LaravelプロジェクトにCORS PKGを追加する必要があります。

https://github.com/barryvdh/laravel-cors

これを使用して、このエラーを修正できます。

0
Shubham Shukla

発生しているエラーは、CORSポリシーヘッダーがリソース（Laravel API））に設定されていないことが原因です。
barryvdhのcorsパッケージ について知っていると思いますが、そのパッケージのインストールプロセスを実行したかどうかを確認できますか？

具体的には、Http/Kernel.phpファイルに次のように記述します。

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

または

protected $middlewareGroups = [
    'web' => [
       // ...
    ],

    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

1つ目はミドルウェアをアプリにグローバルに注入し、2つ目はAPIガードに注入します。APIルートをroutes/api.phpで定義している場合は、それも機能するはずです。

さらに、php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"を使用してパッケージの構成を公開し、許可されたヘッダーを'allowedHeaders' => ['*'],に変更することもできます。

0
Rezrazi