So fügen Sie Cookies an domänenübergreifende Ajax-Anfragen an

Dieses Mal zeige ich Ihnen, wie Sie das Problem des Cookie-Verlusts beim domänenübergreifenden Ajax-Zugriff lösen können. Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

Bei der eigentlichen Entwicklung des Projekts werden wir immer auf Projekte stoßen, bei denen das Front-End und das Back-End getrennt sind. Bei solchen Projekten ist die domänenübergreifende Speicherung das erste Problem, das gelöst werden muss Es ist jedoch sehr wichtig, dass die Methode der Kombination von Sitzung und Cookie normalerweise verwendet wird, um Benutzerinformationen im Hintergrund zu speichern. In der tatsächlichen Situation des Frontends kann der domänenübergreifend generierte Ajax jedoch keine Cookie-Informationen übertragen, was dazu führt Der Verlust von Sitzungs- und Cookie-Benutzerinformationen ist betroffen. Wie kann ich ein solches Problem anhand der Informationen lösen? Ich nehme die Ajax-Anfrage in $http von angleJS.

Zuerst verwende ich im Hintergrund den Servlet-Filter, um alle Anfragen abzufangen und den Anfrage-Header festzulegen:

	// 解决跨越问题

	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");

Der obige Teil des Codes dient dazu Lösen Sie das domänenübergreifende Problem. Der fragliche Code und der zweite Teil von Response.setHeader("Access-Control-Allow-Credentials", "true"); ist der Code, der die Übertragung von Cookies im Backend ermöglicht.

Front-End-Code:

$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('网络或设置错误');
                    }
                })
            }

Aus dem obigen Code können wir das domänenübergreifend leicht erkennen Anfragen im Front-End Der wichtigste Punkt ist withCredentials:true Diese Anweisung kann in Kombination mit den im Hintergrund festgelegten „Access-Control-Allow-Credentials“ und „true“ Cookies in domänenübergreifenden Ajax-Anfragen übertragen.

Beim Testen habe ich jedoch einige Probleme festgestellt. Als die Anfrage gesendet wurde, meldete der Browser den folgenden Fehler:

Antwort auf den Preflight Die Anfrage besteht die Zugriffskontrollprüfung nicht: Ein Platzhalter „*“ kann nicht im Header „Access-Control-Allow-Origin“ verwendet werden, wenn das Credentials-Flag „true“ ist. Daher ist der Zugriff auf die Credentials nicht gestattet Der Modus einer XMLHttpRequest wird durch das withCredentials-Attribut gesteuert.

Nachdem ich relevante Informationen konsultiert habe, habe ich herausgefunden, dass der Grund darin liegt, den domänenübergreifenden Code „response.setHeader(“Access-Control- Allow-Origin", "*"); Dieser Teil steht im Konflikt mit dem Teil zum Einrichten von domänenübergreifenden Cookies. Nachdem ich die relevanten Informationen überprüft hatte, stellte ich fest, dass beim Einrichten domänenübergreifender Ajax-Anfragen zum Tragen von Cookies die Zugriffskontrolle- Allow-Origin muss angegeben werden. Dies bedeutet, dass sein Wert nicht * sein kann. Wenn Sie jedoch daran denken, dass sich die Front-End-IP ändert, wenn Front-End und Back-End getrennt werden, haben Sie das Gefühl, wieder am ursprünglichen Punkt zu sein Können Sie diese Methode nicht verwenden, um das Problem der domänenübergreifenden Ajax-Übertragung von Cookies zu lösen?

Als nächstes habe ich bei der Recherche zu den von mir gestellten Ajax-Anfragen festgestellt, dass in AngularJS der Wert des Origin-Anfrageheaders in jeder Anfrage „null“ ist. Also habe ich den Hintergrund „Access-Control-Allow-Origin“, „*“ in „Access-Control-Allow-Origin“, „null“ geändert und als nächstes wurde alles wunderbar, alle Ajax-Anfragen waren erfolgreich seinen Zweck erreicht.

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

Verwandte Empfehlungen:

JavaScript (Ajax) und Cookie Same Origin Policy

Ajax Bei domänenübergreifenden Anfragen können keine Cookies verwendet werden

Das obige ist der detaillierte Inhalt vonSo fügen Sie Cookies an domänenübergreifende Ajax-Anfragen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!