PHP – Content Management System

そもそもHTTP リクエストとは？ XMLHttpRequest HTTP リクエストの手段は何がある？ XMLHttpRequestでは異なるドメインでアクセス、レスポンスの読み込みができません プリフライトリクエストとは 本リクエストの前に送る確認用の OPTIONS リクエスト。 「対象サーバーがそのクロスオリジンのリクエストを許可するかどうか」のCORSポリシーを事前に確認する目的で送られます どのような場合に場合にプリフライトリクエストが送信されるか？ corsダウンロード ステータスコード HTTPのレスポンスヘッダの先頭に必ず入ってます ステータスコード名前説明200OKリクエスト成功202Acceptedリクエスト成功したが、処理はまだ301Moved Permanentlyリソースは恒久的に移動302Foundリクエストしたリソースは一時的に移動307Temporary Redirectリクエストしたリソースは一時的に移動400Bad Requestリクエストが正しくない403Forbiddenアクセスが禁止されている404Not Found指定したリソースが見つからない405Method Not Allowed指定したメソッドを使えません406Not AcceptableAccept関連のヘッダに問題413Request Entity Too Largeリクエストボディが大きすぎる415Unsupported Media Typeサポートしていないメディアタイプ429Too Many Requestsリクエスト回数が多すぎる500Internal Server Errorサーバー側でエラーが発生503Service Unavailableサーバーが一時的に停止 より詳細は下記を参照 https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status CORS と同一オリジンポリシー Web ブラウザには同一オリジンポリシーがあり、異なるオリジン間のリソースアクセスは制限されます。CORS（Cross-Origin Resource Sharing）は、サーバーが特定の外部オリジンからのアクセスを許可する仕組みです。プリフライトは、この CORS 許可可否を事前確認するための仕組みです。 https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/CORS プリフライトの流れ ブラウザが OPTIONS メソッドで以下のヘッダーを送信: Origin: 要求元オリジン（例: https://app.example.com） Access-Control-Request-Method: これから送る本リクエストの HTTP メソッド Access-Control-Request-Headers: 本リクエストで送る予定のカスタムヘッダー一覧 サーバーは許可する場合、以下のヘッダーを含めて 200 などで応答: Access-Control-Allow-Origin: 許可するオリジン（* も可。ただし認証絡みでは制約あり） Access-Control-Allow-Methods: 許可するメソッド Access-Control-Allow-Headers: 許可するリクエストヘッダー Access-Control-Max-Age: プリフライト結果のキャッシュ秒数 必要に応じて Access-Control-Allow-Credentials: true ブラウザは許可を確認できたら、本リクエスト（GET/POST/PUT/...）を送信します。 ブラウザからの例（fetch） await fetch('https://api.example.com/users', { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer &lt;token&gt;', }, body: JSON.stringify({ name: 'Taro' }), credentials: 'include', // クッキーを伴う場合 }); 上記は PUT と Authorization によりプリフライトが発生します。 サーバー側の設定例 Apache (httpd) mod_headers を有効化のうえ、&lt;VirtualHost&gt; などで設定: &lt;IfModule mod_headers.c&gt; Header always set Access-Control-Allow-Origin "https://app.example.com" Header always set Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS" Header always set Access-Control-Allow-Headers "content-type,authorization" Header always set Access-Control-Allow-Credentials "true" Header always set Access-Control-Max-Age "86400" # OPTIONS には即時応答（必要に応じて） &lt;If "%{REQUEST_METHOD} == 'OPTIONS'"&gt; Header always set Content-Length "0" &lt;/If&gt; &lt;/IfModule&gt; Nginx location / { if ($request_method = OPTIONS) { add_header Access-Control-Allow-Origin "https://app.example.com" always; add_header Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS" always; add_header Access-Control-Allow-Headers "content-type,authorization" always; add_header Access-Control-Allow-Credentials "true" always; add_header Access-Control-Max-Age 86400 always; return 204; } add_header Access-Control-Allow-Origin "https://app.example.com" always; add_header Access-Control-Allow-Credentials "true" always; } Node.js (Express) import express from 'express'; import cors from 'cors'; const app = express(); app.use(cors({ origin: 'https://app.example.com', methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['content-type', 'authorization'], credentials: true, maxAge: 86400, })); app.listen(3000); PHP（フレームワーク未使用の素朴な例） &lt;?php $origin = 'https://app.example.com'; header('Access-Control-Allow-Origin: ' . $origin); header('Access-Control-Allow-Credentials: true'); header('Vary: Origin'); if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE,OPTIONS'); header('Access-Control-Allow-Headers: content-type,authorization'); header('Access-Control-Max-Age: 86400'); http_response_code(204); exit; } // 以降に本処理 トラブルシューティング ブラウザの開発者ツールのネットワークタブで OPTIONS 応答を確認 curl で再現: curl -i -X OPTIONS \ -H "Origin: https://app.example.com" \ -H "Access-Control-Request-Method: PUT" \ -H "Access-Control-Request-Headers: content-type,authorization" \ https://api.example.com/users

プリフライトリクエストを使用してAPIにリクエスト