「Angular Laravel has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response」
- LaravelのCORSミドルウェアを設定する: Laravelでは、CORSを制御するためのミドルウェアが用意されています。まず、
app/Http/Middlewareディレクトリ内にCors.phpという名前のミドルウェアファイルを作成します。以下のコードをCors.phpに追加します。
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, Authorization');
}
}次に、app/Http/Kernel.phpファイルを開き、$middleware配列に以下の行を追加します。
protected $middleware = [
// ...
\App\Http\Middleware\Cors::class,
];これにより、CORSミドルウェアがすべてのリクエストに適用されます。
- LaravelのルートでCORSを許可する: LaravelのルートファイルでCORSを許可する方法もあります。
routes/api.phpファイル（または適切なルートファイル）に以下のようなコードを追加します。
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::middleware('cors')->group(function () {
// CORSを許可するルート
Route::get('/example', function (Request $request) {
return response()->json(['message' => 'CORS allowed']);
});
});上記の例では、corsミドルウェアを使用してCORSを許可しています。
- プロキシを使用する: もう一つの方法は、Angularの開発サーバーとLaravelのバックエンドサーバーの間にプロキシを設定することです。これにより、ブラウザが直接Laravelのサーバーにアクセスするのではなく、Angularの開発サーバーを経由してアクセスするようになります。具体的な手順は以下の通りです。
- Angularの
proxy.conf.jsonファイルを作成し、以下のように設定します。
{
"/api/*": {
"target": "http://localhost:8000",
"secure": false,
"logLevel": "debug"
}
}- Angularの
package.jsonファイルのscriptsセクションに以下の行を追加します。
"start": "ng serve --proxy-config proxy.conf.json",- Angularアプリケーションを再起動します。
これにより、Angularの開発サーバーがプロキシを介してLaravelのバックエンドにリクエストを転送し、CORSエラーが回避されます。
以上の方法を試してみてください。これらの手法のいずれかがCORSポリシーによるエラーを解決するはずれとなる可能性があります。また、ご使用の環境や具体的なエラーメッセージによって最適な解決策が異なる場合がありますので、適宜調整してください。