Laravel API + React フロントエンドリクエスト、Axios が 404 を返す - Access-Control-Allow-Origin

Question

React から Laravel API に POST リクエストを実行しようとしています。開発モードでリクエストを送信すると、リクエストは成功しますが、Apache2 に API(:8000) とフロントエンド(:80) をデプロイすると、リクエストは厳密モード ポリシーによってブロックされ、CORS エラーが表示されます。リクエストにはアクセス制御がありません - 応答のAllow-Originと404。ただし、Laravel と React のページにはブラウザーでアクセスできます。リクエストには Axios を使用します。 また、Web サイトには同じベース URL http://localhost が必要です。 多くの解決策を試しましたが、どれもうまくいきませんでした。

Laravel 10.x カーネル

多くのユーザーがサーバー応答にヘッダーを追加するミドルウェアの作成を提案しているのを見てきました。同様のコンテンツが Laravel にデフォルトで追加されます (conf/cors.php)。 私のファイルは次のようになります

'paths' => ['http://127.0.0.1:8000','http://localhost','api/*', 'sanctum/csrf-cookie']、
    
    'allowed_methods' => ['*'],
    
    'allowed_origins' => ['*'],
    
    'allowed_origins_patterns' => [],
    
    'allowed_headers' => ['*'],
    
    'exused_headers' => ['*'],
    
    'max_age' => 0、
    
    'supports_credentials' => false,

Kernel.phpには以下のように登録されています

protected $middlewareAliases = [
                 // 'cors' => \App\Http\Middleware\Cors::class, <- これは現在使用されていないカスタム ミドルウェアです
                'cors' => \Illuminate\Http\Middleware\HandleCors::class,
                'auth' => \App\Http\Middleware\Authenticate::class,
                ...
    
         保護された $ミドルウェア = [
            // \App\Http\Middleware\Cors::class, <- これはカスタムです
    ミドルウェアは現在使用されていません
            \Illuminate\Http\Middleware\HandleCors::class,

これは、カスタム ミドルウェアを使用する場合の api.php にあるものです

Route::group(['middleware'=>'cors','prefix'=>'api'], function ()
{
    Route::post('/signup',[AuthController::class, 'signup']);
    Route::post('/login',[AuthController::class, 'login']);
    Route::post('/logout',[AuthController::class, 'logout']);
    Route::post('/user/post',[PostController::class,'createPost']);
    Route::get('/user/post',[PostController::class,'getPostsInMonth']);
    
    Route::post('/media/upload',[UploadController::class,'upload']);

});

カスタムミドルウェアを使用しても成功しません

class Cors
    {
        パブリック関数ハンドル(リクエスト $request, クロージャ $next): レスポンス
        {
            $next($request) を返す
                ->header('アクセス制御-許可オリジン', '*')
                ->header('アクセス制御の許可メソッド', 'GET、POST、PUT、PATCH、DELETE、OPTIONS')
                ->header('Access-Control-Allow-Headers', 'Content-Type、Authorization、Origin、X-Requested-With');
        }
    }

Apache Laravel VirtualHost ファイルにヘッダーを追加

<VirtualHost *:8000>
        サーバー名 website.com
        ServerAlias*.website.com
        ServerAdmin webmaster@localhost
        DocumentRoot .../laravel/public
        ヘッダーに Access-Control-Allow-Origin "*" を追加します。
        ヘッダーに Access-Control-Allow-Headers "Origin、X-Requested-With、Content-Type、Accept、Authorization" を追加します。
        <ディレクトリ ".../laravel">
            ヘッダー セット Access-Control-Allow-Origin "*"
            ヘッダー セット Access-Control-Allow-Headers "Origin、X-Requested-With、Content-Type、Accept、Authorization"
            命令の許可、拒否
            すべてから許可する
            すべての付与を要求する
        </ディレクトリ>
    </VirtualHost>

React Apache VirtualHost ファイルは Laravel ファイルに非常によく似ています

成功しませんでした:(

Laravel/public の

.htaccess

<IfModule mod_headers.c>
        ヘッダー セット Cross-Origin-Resource-Policy 'cross-origin'
        ヘッダー セット Access-Control-Allow-Origin "*"
    </IfModule>

API アドレスをプロキシとして設定

package.json に次の行を追加しました

"プロキシ": "http://localhost:8000",

http-proxy-middleware パッケージも試してみました React/src フォルダー内の setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function(app) {
     app.use(
        '/api/*',
        createProxyMiddleware({
          ターゲット: 'http://localhost:8000',
          ChangeOrigin: true、
        })
     );
    };

axios クライアント スクリプト

「axios」から axios をインポートします;
    
    const axiosClient = axios.create({
        ベース URL: "http://127.0.0.1:8000/api"、
    })
    
    axiosClient.interceptors.request.use((config)=>{
        const token = localStorage.getItem('ACCESS_TOKEN');
        config.headers = {
            '認可': `ベアラー ${トークン}`,
            'アクセス制御-許可-オリジン': '*'
        }
        構成を返します。
    }）
    
    axiosClient.interceptors.response.use((response)=>{
        応答を返します。
    },(エラー)=>{
        const {応答} = エラー;
        if(response &&response.status == 401){
            localStorage.removeItem('ACCESS_TOKEN');
        }
    
        エラーをスローします。
    })
    
    デフォルトの axiosClient;

をエクスポートします。

多くの設定によりサイトが安全ではなくなることは承知していますが、これは開発目的のみです。 助けてください。3 日間この問題に苦しんでいます><

これが私が得た結果です（申し訳ありませんが、フォーマットの問題によりスタックが画像をアップロードすることを望んでいません）

![1]: https://pasteboard.co/feqZ6JrGrvBM.png
![2]: https://pasteboard.co/nluAk8scYXzY.png
![3]: https://pasteboard.co/JF7yiHhH4XtB.png

Answer 1

最後に、プロジェクト全体を /var/www フォルダーから移動し、各サイトのパブリック フォルダーへのシンボリック リンクのみを作成します。また、 では、ドキュメント ルート パスを パスと同じに設定します。その後、Laravel プロジェクトのデフォルトの CORS ハンドラーが正常に動作し始めます。