axiosが2回送信したリクエストの原因と解決方法
vue-resourceは更新されていないので、vueはaxiosを推奨するのでaxiosを使用します. ページインタラクション中にaxiosは必ず2回のリクエストを送信することがわかります.1回は自分で設定したリクエスト方式で、もう1回はoptionsです. この問題について、各サイトで原因を求め、以下の結論を出した. ドメイン間リソース共有基準には、サーバがどのソース局がどのリソースにアクセスできるかを宣言できるようにするHTTPヘッダフィールドのセットが追加されました.さらに、サーバデータに対して副作用を生じる可能性のあるHTTP要求方法(特にGET以外のHTTP要求、またはいくつかのMIMEタイプのPOST要求を組み合わせる)について、ブラウザは、まずOPTIONS法を用いてプリチェック要求(preflight request)を開始し、サービス側がドメイン間要求を許可するかどうかを知る必要がある.サーバが許可を確認してから、実際のHTTPリクエストが開始されます.事前検査要求の返信において、サーバ側は、CookiesおよびHTTP認証関連データを含むアイデンティティ証明書を携帯する必要があるかどうかをクライアントに通知することもできる. つまり、optionsを使用してテストします.このインタフェースが正常に通信できるかどうか、できない場合は本当のリクエストを送信しません.テスト通信が正常であれば、正常なリクエストを開始します. この問題については、バックグラウンドで設定し、optionsリクエストを許可する必要があります.そうしないと、あなたのリクエストが影響を受けます.バックグラウンドで判断し、リクエスト方式がoptionsであれば、通信できると伝え、他は直接何もしません. 以下はPHPの設定内容です
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:content-type");
header("Access-Control-Request-Method:GET,POST");
if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){
exit;
}