[Laravel] 本番環境でCORS対応できない

本番環境

Vue.js 2.6.12
netlify にデプロイしてます
axios で Laravel とやりとりしてます

Laravel 8.25.0
Xserver にデプロイしてます

問題

まず、ローカル環境でポートフォリオ作成していた時に Vue.js側と Laravel側で異なるドメインへのアクセスするために Cors対応しないといけないと知りました。
そこでこちらの記事を参考にして config/cors.php を編集して、Vue.js と Laravel でやりとりができるようになりました。
Laravel7でのCors対応について

<?php

return [

    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => false,

    'max_age' => false,

    'supports_credentials' => false,

];

しかし、本番環境になると

error
1Access to XMLHttpRequest at 'https://www.*****.com/api/posts/' from origin 'https://******.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

と error のログがでてブロックされてしまいます。

調べたこと

こちらの記事を参考にして CORS を設定するミドルウェアを作成してみました
CORSについて理解してLaravel5.6で対応する

####ミドルウェアを作成して修正

Cros
1<?php
2
3namespace App\Http\Middleware;
4
5use Closure;
6use Illuminate\Http\Request;
7
8class Cors
9{
10    /**
11     * Handle an incoming request.
12     *
13     * @param  \Illuminate\Http\Request  $request
14     * @param  \Closure  $next
15     * @return mixed
16     */
17    public function handle(Request $request, Closure $next)
18    {
19        return $next($request)
20            ->header('Access-Control-Allow-Origin', '*')
21            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
22            ->header('Access-Control-Allow-Headers', 'Accept, X-Requested-With, Origin, Content-Type');
23    }
24}

####カーネルに追加

Kernel
1    protected $routeMiddleware = [
2        'auth' => \App\Http\Middleware\Authenticate::class,
3        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
4        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
5        'can' => \Illuminate\Auth\Middleware\Authorize::class,
6        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
7        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
8        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
9        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
10        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
11        'cors' => \App\Http\Middleware\Cors::class, //＋追加
12    ];

####routeを修正

api
1Route::middleware(['cors'])->group(function () {
2    Route::options('accounts', function () {
3        return response()->json();
4    });
5
6    Route::post('accounts', 'AccountController@create');
7});

しかし同じエラーが出てしまい、ブロックされてしまいます。。
まだ理解できていない事も多いので、勘違いをしてどこか間違えているのかもしれません。
このエラーを解決するためにどうかお力を貸してほしいです。

行動規範の内容に同意します

回答2件

自己解決

そもそもWebサーバー側で(Apache or Nginx)でCORSが許可されてなかったみたいです。
Xserverの.htaccessを変更したら解決しました！

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "NetlifyのIPアドレス"
Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" 
Header set Access-Control-Allow-Headers: "Content-Type, x-http-method-override"
</IfModule>

投稿2021/03/17 11:10

ktaraw1574

総合スコア7

corsの前にLaravel側が正しく動いてるか確認が必要。
なんらかのエラーでcorsのヘッダーが出力されてない可能性がある。
JS側から見ると先にcorsで引っかかってるのでエラーかどうか見えない。

Laravel8なら最初からcors対応してるのでミドルウェア作ってる部分は不要なので全部消していい。
5.6なんて古いバージョンの情報は役に立たない。

投稿2021/03/11 05:01

kawax

総合スコア10377

ktaraw1574

2021/03/11 05:50 編集

kawaxさん回答ありがとうございます。今のところ新規登録機能、ログイン機能、post投稿機能は、動くのですが、post一覧を取ってくる GETメソッド　https://www.*****.com/api/posts/ だけが cors に引っかかっているみたいです。 ---------------------------vue async getSpots() { const spots = await axios.get(process.env.VUE_APP_SKATE_MAPS_API + "/api/posts/") ---------------------------api.php use App\Http\Controllers\PostsController; Route::apiResource('/posts', PostsController::class); ----------------------PostsController.php public function index() { $spots = Post::orderBy('id', 'desc')->get(); return response()->json([ 'message' => 'OK', 'data' => $spots ], 200); } -------------------------------------- どこかおかしいところがあったら教えていただきたいです！厚かましいですが、一応ポートフォリオサイトとGitHubを置いて起きます。もし時間があればみてほしいです。 GitHub https://github.com/kotaro1574/skate-maps-api/blob/master/app/Http/Controllers/PostsController.php skate-maps https://elated-hermann-a0eca6.netlify.app/