ホームページ > 記事 > ウェブフロントエンド > Cookie を使用して Ajax クロスドメインリクエストを実装する方法

Cookie を使用して Ajax クロスドメインリクエストを実装する方法

不言オリジナル: 2018-09-10 14:29:021545ブラウズ

この記事の内容は、Cookie を使用した Ajax クロスドメインリクエストの実装方法についてです。必要な方は参考にしていただければ幸いです。

実際のプロジェクトの開発では、フロントエンドとバックエンドが分離されているプロジェクトに必ず遭遇します。また、そのようなプロジェクトでは、クロスドメインが最初に解決されるべき問題になります。また、ユーザー情報の保存も非常に重要です。ただし、セッションと 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");

コードの上部はクロスドメインの問題を解決するコードで、応答の 2 番目の部分は.setHeader("Access-Control -Allow-Credentials", "true"); これは、バックエンドでの 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」は、クロスドメイン Ajax リクエストで Cookie を送信できます。

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

プリフライトリクエストへの応答はアクセス制御チェックに合格しません:「アクセス」ではワイルドカード「*」を使用できません。したがって、資格情報フラグが true の場合、Origin 'null' ヘッダーは資格情報へのアクセスを許可されません。 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");

Cookie を使用して Ajax クロスドメインリクエストを実装する方法

関連記事