我在使用 Laravel 10 获取图像时遇到 CORS 错误

Question

我有一个 Laravel 10 的 API，我正在尝试获取保存在 public/images 文件夹中的图像。

这是我在控制器中的功能：

public function show()
{
    $imageUrl = asset('images/myimage.png');
    return response()->json(['imageUrl' => $imageUrl]);
}

这是我的 API：

Route::get('images', [ImageController::class, 'show']);
Route::post('images', [ImageController::class, 'store']);

使用 POSTMAN，响应http://127.0.0.1:8000/api/images是：

{
    "imageUrl": "http://127.0.0.1:8000/images/myimage.png"
}

如果我用 POSTMAN 或浏览器打开该 url，我就可以完美地看到图像。但是，当我尝试在前端应用程序（使用 Angular 15）中获取图像时，我收到 CORS 错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/images/myimage.png' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的cors配置文件是这样的：

<?php

return [
    'paths' => ['api/*', 'images/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

我也尝试像这样编辑 Kernel.php 但没有成功：

protected $middleware = [
    // \App\Http\Middleware\TrustHosts::class,
    \App\Http\Middleware\TrustProxies::class,
    \Illuminate\Http\Middleware\HandleCors::class,
    \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],

    'api' => [
        // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \Illuminate\Http\Middleware\HandleCors::class
    ],

    'images' => [
        \Illuminate\Http\Middleware\HandleCors::class
    ]
];
protected $middlewareAliases = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
    'signed' => \App\Http\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
];

在我的 Angular 项目中，我还为此 API 添加了一个代理配置文件：

{
  "/api/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },
  "/images/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug"
  }
}

我用来在 Angular 中发出请求的函数：

getImage(): Observable<Blob> {
  const headers = new HttpHeaders({ 'Content-Type': 'image/png' });
  return this.http.get('http://127.0.0.1:8000/images/myimage.png', { headers, responseType: 'arraybuffer' }).pipe(
    map((response: ArrayBuffer) => {
      return new Blob([response], { type: 'image/png' });
    })
  );
}

我一直在阅读有关 Laravel 的 CORS 问题，但大多数结果都是关于创建中间件 CORS 文件或使用 Fruitcake，现在不需要这些，因为 Laravel 10 默认情况下具有 CORS 文件。

我错过了什么吗？谢谢！