<p>React から Laravel API に POST リクエストを実行しようとしています。開発モードでリクエストを送信すると、リクエストは成功しますが、Apache2 に API(:8000) とフロントエンド(:80) をデプロイすると、リクエストは厳密モード ポリシーによってブロックされ、CORS エラーが表示されます。リクエストにはアクセス制御がありません - 応答のAllow-Originと404。ただし、Laravel と React のページにはブラウザーでアクセスできます。リクエストには Axios を使用します。 また、Web サイトには同じベース URL <code>http://localhost</code> が必要です。 多くの解決策を試しましたが、どれもうまくいきませんでした。 </p> <h1>Laravel 10.x カーネル</h1> <p>多くのユーザーがサーバー応答にヘッダーを追加するミドルウェアの作成を提案しているのを見てきました。同様のコンテンツが Laravel にデフォルトで追加されます (<code>conf/cors.php</code>)。 私のファイルは次のようになります</p> <pre class="brush:php;toolbar:false;">'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,</pre> <p><code>Kernel.php</code>には以下のように登録されています</p> <pre class="brush:php;toolbar:false;">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,</pre> <p>これは、カスタム ミドルウェアを使用する場合の <code>api.php</code> にあるものです</p> <pre class="brush:php;toolbar:false;">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']); });</pre> <p>カスタムミドルウェアを使用しても成功しません</p> <pre class="brush:php;toolbar:false;">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'); } }</pre> <h1>Apache Laravel VirtualHost ファイルにヘッダーを追加</h1> <pre class="brush:php;toolbar:false;"><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></pre> <p>React Apache VirtualHost ファイルは Laravel ファイルに非常によく似ています</p> <p>成功しませんでした:(</p> Laravel/public の <h1>.htaccess</h1> <pre class="brush:php;toolbar:false;"><IfModule mod_headers.c> ヘッダー セット Cross-Origin-Resource-Policy 'cross-origin' ヘッダー セット Access-Control-Allow-Origin "*" </IfModule></pre> <h1>API アドレスをプロキシとして設定</h1> <p><code>package.json</code> に次の行を追加しました</p> <pre class="brush:php;toolbar:false;">"プロキシ": "http://localhost:8000",</pre> <p><code>http-proxy-middleware</code> パッケージも試してみました React/src フォルダー内の <code>setupProxy.js</code></p> <pre class="brush:php;toolbar:false;">const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api/*', createProxyMiddleware({ ターゲット: 'http://localhost:8000', ChangeOrigin: true、 }) ); };</pre> <h1>axios クライアント スクリプト</h1> <pre class="brush:php;toolbar:false;">「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;</pre> をエクスポートします。 <p>多くの設定によりサイトが安全ではなくなることは承知していますが、これは開発目的のみです。 助けてください。3 日間この問題に苦しんでいます><</p> <p>これが私が得た結果です（申し訳ありませんが、フォーマットの問題によりスタックが画像をアップロードすることを望んでいません）</p> <pre class="brush:php;toolbar:false;">![1]: https://pasteboard.co/feqZ6JrGrvBM.png ![2]: https://pasteboard.co/nluAk8scYXzY.png ![3]: https://pasteboard.co/JF7yiHhH4XtB.png</pre></p>