storage/app/public/ディレクトリにjsonファイルを設置し、外部サイトからアクセスした際にこのようなエラーが・・・。
Access to XMLHttpRequest at 'https://example.com/storage/app/public/test.json' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.どうやらCORSエラーが出てしまっているようです。
一度、LaravelのCORS対策の内容を確認してみます。
Laravel7.0以降であればデフォルトでconfig/cors.phpにCORSの対策が書かれています。確認してみましょう。
<?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,
];'allowed_origins' => ['*']デフォルトで全てのドメインからの通信を受け入れる「*」ワイルドカードになっています。
設定は問題なさそうなので、適用されているか確認してみましょう。
app/Http/Kernel.phpを確認してみます。
<?php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
/**
* The application's global HTTP middleware stack.
*
* These middleware are run during every request to your application.
*
* @var array<int, class-string|string>
*/
protected $middleware = [
// \App\Http\Middleware\TrustHosts::class,
\App\Http\Middleware\TrustProxies::class,
\Fruitcake\Cors\HandleCors::class,
\App\Http\Middleware\PreventRequestsDuringMaintenance::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];\Fruitcake\Cors\HandleCors::classCORS対策が有効になっていますが上手く解決しません・・・。
調べているとこのような記事を見つけました。
どうやら先程確認していたCORSの設定はLaravelAPIを利用した際にCORS対策を適用できるミドルウェアのようです。
このミドルウェアはパブリックディレクトリには適用されません。
現状、パブリックディレクトリに何もCORS設定をしていない状態になります。
サーバーの設定ファイルにCORSヘッダーを追加する事で解決できます。
Nginxだとnginx.conf、Apacheだとhttpd.confになります。
また、.htaccessにも追加する事ができます。
<IfModule mod_rewrite.c>
+ Header set Access-Control-Allow-Origin: "*"
+ Header set Access-Control-Allow-Methods: "*"
+ Header set Access-Control-Allow-Headers: "*"
</IfModule>無事にCORSエラーが解消され、正常に受け取れるようになります。
今回は、参考用にAccess-Control-Allow-Origin: “*”しましたが、セキュリティ的によくありません。
どこからのリクエストでも受け付けるようになってしまっています。
<IfModule mod_rewrite.c>
+ Header set Access-Control-Allow-Origin: http://localhost:8080
</IfModule>このように変更する事で特定のオリジンからのリクエストのみ受け付けるようになります。
Access-Control-Allow-Methods: “*”も同様です。
例としてレスポンスリクエストをGETとPOSTしか許可しないように設定してみます。
<IfModule mod_rewrite.c>
+ Header set Access-Control-Allow-Methods: GET, POST
</IfModule>セキュリティ的に良くないので、極力「*」ワイルドカードは避けましょう。
