ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax クロスドメインリクエストに Cookie を添付する方法

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

坏嘻嘻オリジナル: 2018-09-13 17:26:431708ブラウズ

今回は、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: &#39;post&#39;,
                    params: $scope.user,
                    url: &#39;http://localhost:8080/user/login&#39;
                }).then(function (res) {
                    alert(res.data.msg);
                }, function (res) {
                    if (res.data.msg) {
                        alert(res.data.msg);
                    } else {
                        alert(&#39;网络或设置错误&#39;);
                    }
                })
            }

上記のコードから、次のことを知るのは難しくありません。フロントエンドのクロスドメインリクエストで最も重要な点は 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");

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

関連記事