DockerでNext.jsとLaravelの環境を構築し、LaravelBrezeを導入するとクロスポリシーエラーが発生する

Question

実現したいこと

・Docker環境でLaravelとNext.jsを構築し、認証機能はLaravelBreezeを使いNext.jsの3000番ポートとLaravelの8000番ポートでAPI通信したい

発生した問題

DockerでLaravelとNext.jsの環境を構築しNext.jsのサーバー(3000番)をDockerDescTopから起動するとコンソールに以下のようなエラーメッセージが表示されました。

エラーメッセージ1

Access to XMLHttpRequest at 'http://localhost:8000/api/user' from origin 'http://localhost:3000' 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.

エラーメッセージ2

GET http://localhost:8000/api/user net::ERR_FAILED

なおLaravelBreezeを導入すると画面右上に表示されるloginとregisterボタンは正常に表示されています。新規登録やログイン機能はError: Network Errorと表示され実行できません

Docker環境でプロジェクト構築手順

1. windowsターミナルからubuntuを選択しフォルダを作成しVsCodeで開く（フォルダ名はMyApp）
2. プロジェクトを以下のような構成で作成する

clientフォルダはNext.jsプロジェクトを入れる用。serverフォルダはLaravelプロジェクトを入れる用です。（どちらも今現在は空）

それぞれのファイルの中身は以下の通りです。

docker-compose.ymlの内容

version: '3'
services:
  webserver:
    build:
      context: .
      dockerfile: Dockerfile.laravel
    container_name: laravel_apache
    volumes:
      - ./server:/var/www/html
    ports:
      - "8000:80"
    depends_on:
      - db
    networks:
      - app-network
  client:
    build:
      context: .
      dockerfile: Dockerfile.client
    container_name: nextjs_client
    volumes:
      - ./client:/app
    ports:
      - "3000:3000"

    networks:
      - app-network

  db:
    image: mysql
    container_name: mysql_db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel
    volumes:
      - db-data:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
      - app-network


  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: phpmyadmin
    environment:
      PMA_HOST: mysql_db
      PMA_PORT: 3306  
    ports:
      - "8080:80"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  db-data:

Dockerfile.laravelの内容(Laravel用のDockerファイル)

# Dockerfile.laravel
FROM php:8.1-apache

# 必要なライブラリをインストール
RUN apt-get update && apt-get install -y git unzip libpq-dev && docker-php-ext-install pdo pdo_mysql

# Composerをインストール
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer

# プロジェクトディレクトリを設定
WORKDIR /var/www/html

# Apacheの設定を反映
COPY ./apache-config/000-default.conf /etc/apache2/sites-available/000-default.conf

# Apacheを前景で実行(コンテナが起動している間はapacheを起動し続ける設定)
CMD ["apache2ctl", "-D", "FOREGROUND"]

Dockerfile.clientの内容(Next.js用のDockerファイル)

# Dockerfile.client
FROM node:latest

WORKDIR /app

# グローバルにNext.jsをインストール
RUN npm install -g create-next-app

# Next.jsの開発サーバーを起動
CMD ["npm", "run", "dev"]

000-default.confの内容(apacheの設定ファイル)

デフォルトでコメントアウトされていた部分は載せていません

<VirtualHost *:80>
	ServerAdmin webmaster@localhost
	DocumentRoot /var/www/html/public

	#追加
	<Directory /var/www/html/public>
		Options Indexes FollowSymLinks
		AllowOverride All
		Require all granted
	</Directory>

	ErrorLog ${APACHE_LOG_DIR}/error.log
	CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

３．dokerコンテナ作成＆起動する

docker-compose build
docker-compose up -d

4.ホスト側でファイルを編集できるようにプロジェクトのルートディレクトリで以下のコマンドを実行

sudo chown -R $USER:$USER .

4．Laravel用コンテナに入りLaravelをインストールする

#Laravel用コンテナに入る
docker exec -it laravel_apache bash

#Laravel8をインストールする
composer create-project --prefer-dist laravel/laravel:^8.0 .

5．指定のフォルダとファイルの所有者と所有グループをwww-dataに変更&権限を指定

chown -R www-data:www-data storage bootstrap/cache
chmod -R 775 storage bootstrap/cache

LaravelBreeze導入手順

1．以下のコマンドでLaravelコンテナに入る
docker exec -it laravel_apache bash

２． これ以降はLaravelBreezeを導入する下記のサイト通りに行いました。
（composer require laravel/breeze --devコマンドから実行）
Laravel Breeze API + ReactのフレームワークNext.jsの設定方法

3．node_modules/.bin/nextに実行権限を追加する(これをしないとNext.jsコンテナが起動しなかった)

chmod +x node_modules/.bin/next

上記の手順でclientフォルダにNext.jsプロジェクト、cors.phpでCORSの設定などが作成されました。
LaravelBreezeを導入したことでCORSポリシーエラーが発生しないように設定されたファイルは以下のようなものがあると思います。

ーーserverフォルダの中のものーー
cors.php
config/app.php
.env
composer.json
Kernel.php
ーーーーーーーーーーーーーーーー

ーーclientフォルダの中のものーー
.env.example
.env.local(.env.exampleと内容一緒)
axios.js
ーーーーーーーーーーーーーーーー

上記で上げたファイルの中身を明記します。

Laravel側のファイル達

<?php

return [
    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

    'url' => env('APP_URL', 'http://localhost'),

    'frontend_url' => env('FRONTEND_URL', 'http://localhost:3000'),

    'asset_url' => env('ASSET_URL', null),

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

 "require": {
        "php": "^7.3|^8.0",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.75",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5"
    },

 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,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array<string, array<int, class-string|string>>
     */
    protected $middlewareGroups = [
        'web' => [
　　　　\Fruitcake\Cors\HandleCors::class,#追加
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Laravel側のファイル達ここまで↑

Laravel側のファイル達ここまで↑

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

env.localも全く同じ内容

import Axios from 'axios'

const axios = Axios.create({
    baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
    },
    withCredentials: true,
})

export default axios

Next.js側のファイル達ここまで↑

試したこと

fruitcake/laravel-corsというものをインストールすると良いそうなのでLaravelのバージョンを8にしました。8にするとcomposerに記載している通りデフォルトで入っていました。また先ほどのKernel.phpにも記載していますが、以下のコードを追記するとよいとあったので追加しました。

\Fruitcake\Cors\HandleCors::class,#追加

補足情報（FW/ツールのバージョンなど）

Next.jsバージョン:13.0.3
Laravelバージョン:8.83.27（ちなみにバージョン10にしてもエラーは解決せず）
dockerバージョン:24.0.2

Answer 1

\Fruitcake\Cors\HandleCors::class

このライブラリの更新が止まっているようなので、Laravel標準のcorsミドルウエア使えばいいと思います。
選べるならLaravel8ではなく9 or 10にした方がいいということです。

Laravel9 or 10 だとHttpのKernel.phpに \Illuminate\Http\Middleware\HandleCors::class,が標準で書いてあると思います。

問題を切り分けるためにcors.phpの
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],を
'allowed_origins' => ['*']にして動作するか試してみてはどうでしょうか。

サーバー側でdd(config('cors.allowed_origins')); したら何が表示されるか。
cors.allowed_originsに意図した値が入ってないなら一度php artisan config:clear でキャッシュクリアしてみてはどうでしょう。

Comments

[erfechkun]

ご回答ありがとうございます。しかし、いまだ問題は解決しておりません。ご指摘の通り、以下の項目を修正しましたが、変わらずクロスポリシーエラーが発生します。

・LaravelのバージョンをLaravel9 or 10 にする
・'allowed_origins' => ['*']にする

サーバー側でdd(config('cors.allowed_origins'))を設定する方法はよくわかりませんでした。

またAPI通信をするためのポート番号の指定をlocallhostで指定するのではなく、コンテナ名とポート番号で指定すれば治ると思い、Next.jsとLaravelの.envファイルを以下のように修正しましたが、解決しませんでした。

■Laravelの.envファイル
　#変更前
　APP_URL=http://localhost:8000
　FRONTEND_URL=http://localhost:3000

　#変更後
　APP_URL=http://webserver:80
　FRONTEND_URL=http://client:3000

■Next.jsの.env.localファイルと.env.exampleファイル（どちらも全く同じ内容）
　#変更前
　NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

　#変更後
NEXT_PUBLIC_BACKEND_URL=http://webserver:80

[niiyz]

エラーになっているページをChromeのデペロッパーツールで見て [ネットワーク]タブでhttp://localhost:8000/api/userなりhttp://webserverを選択して[ヘッダー]-[レスポンスヘッダー]の項目に「Access-Control-Allow-Origin:」が存在して値が存在しますか？

Access-Control-Allow-Origin: * ならどこからでもOK
Access-Control-Allow-Origin: http://client:3000 ならhttp://client:3000を許可しているというサーバー側の設定になると思います。
これが設定されていないとフロント側のドメインが弾かれているということになります。

フロント側の設定としてはaxiosにwithCredentials: trueが書いてあるので問題ないのではと思ってます。