Ajax クロスドメインリクエストに Cookie を添付する方法

今回は、Ajax クロスドメインアクセス時の Cookie 消失問題の解決方法を紹介します。Ajax クロスドメインアクセス時の Cookie 消失問題を解決するための注意点を以下に挙げます。見てください。

実際のプロジェクト開発では、フロントエンドとバックエンドが分離されているプロジェクトが必ず発生します。また、そのようなプロジェクトでは、最初に解決すべき問題がユーザー情報の保存です。ただし、セッションと Cookie を組み合わせる方法は、通常、バックグラウンドでユーザー情報を保存するために使用されることが非常に重要です。フロントエンドの実際の状況では、ドメイン間で生成された ajax は Cookie 情報を運ぶことができないため、セッションと Cookie のユーザー情報が失われる ストレージ モードが影響を受ける このような問題を解決するには、angularJS の $http の ajax リクエストを例に挙げます。

まず、バックグラウンドでサーブレット フィルターを使用してすべてのリクエストをインターセプトし、リクエスト ヘッダーを設定します。

	// 解决跨越问题

	response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,SessionToken");

	// 允许跨域请求中携带cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");

コードの上記の部分は次のとおりです。クロスドメインの問題を解決する 問題のコード、response.setHeader("Access-Control-Allow-Credentials", "true"); の 2 番目の部分は、バックエンドでの Cookie の送信を許可するコードです。

フロントエンド コード:

$scope.login = function () {
                $http({
                    // 设置请求可以携带cookie
                    withCredentials:true,
                    method: 'post',
                    params: $scope.user,
                    url: 'http://localhost:8080/user/login'
                }).then(function (res) {
                    alert(res.data.msg);
                }, function (res) {
                    if (res.data.msg) {
                        alert(res.data.msg);
                    } else {
                        alert('网络或设置错误');
                    }
                })
            }

上記のコードから、次のことを知るのは難しくありません。フロントエンドのクロスドメインリクエストで最も重要な点は withCredentials:true です。このステートメントは、バックグラウンドで設定された「Access-Control-Allow-Credentials」および「true」と組み合わせることで、クロスドメインで Cookie を送信できます。ドメイン Ajax リクエスト。

しかし、テスト中にいくつかの問題が見つかりました。リクエストが送信されると、ブラウザーは次のエラーを報告しました。

プリフライト リクエストへの応答アクセス制御チェックに合格しません: 資格情報フラグが true の場合、ワイルドカード '*' を 'Access-Control-Allow-Origin' ヘッダーで使用することはできないため、資格情報へのアクセスは許可されません。 XMLHttpRequest のモードは withCredentials 属性によって制御されます。

関連情報を調べた結果、その理由はクロスドメイン コードの応答を解決するためであることがわかりました。setHeader("Access-Control- Allow-Origin", "*"); この部分は、Cookie を運ぶクロスド​​メインの設定の部分と競合します。関連情報を確認したところ、Cookie を運ぶためにクロスドメインの Ajax リクエストを設定するときに、Access-Control-これは、Allow-Origin を指定する必要があります。これは、その値を * にすることはできません。ただし、フロントエンドとバックエンドを分離すると、フロントエンドの IP が変わることを考えると、原点に戻ったように感じます。 . この方法を使用して、Ajax クロスドメインと Cookie の転送の問題を解決することはできませんか?

次に、私が行った ajax リクエストの調査中に、angularJS ではすべてのリクエストの Origin リクエスト ヘッダーの値が「null」であることがわかりました。これはどういう意味ですか?そこで、背景の "Access-Control-Allow-Origin"、"*" を "Access-Control-Allow-Origin"、"null" に変更しました。すると、次は素晴らしいことになり、付随する Cookie がすべて成功しました。目的を達成しました。

      response.setHeader("Access-Control-Allow-Origin", "null");

関連する推奨事項:

JavaScript (Ajax) および Cookie 同一生成元ポリシー

AjaxクロスドメインリクエストはCookieを使用できません

以上がAjax クロスドメインリクエストに Cookie を添付する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。