So implementieren Sie eine domänenübergreifende Ajax-Anfrage mit Cookies

Der Inhalt dieses Artikels befasst sich mit der Implementierung von domänenübergreifenden Ajax-Anfragen. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Bei der eigentlichen Entwicklung des Projekts werden wir immer auf Projekte mit Front-End- und Back-End-Trennung stoßen. Bei solchen Projekten ist domänenübergreifend das erste Problem, das gelöst werden muss. Das Speichern von Benutzerinformationen ist ebenfalls sehr wichtig. Die Methode der Kombination von Sitzung und Cookie wird jedoch normalerweise verwendet, um Benutzerinformationen im Hintergrund zu speichern. In der tatsächlichen Situation des Front-Ends kann Ajax keine Cookie-Informationen übertragen, was dazu führt Das Problem der Sitzung und des Cookies ist betroffen. Wie kann ich ein solches Problem anhand der Ajax-Anfrage in $http von angleJS lösen?

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 obere Teil des Codes ist der Code zur Lösung des domänenübergreifenden Problems und der zweite Teil ist Response.setHeader("Access-Control-Allow-Credentials", "true"); Dies 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 leicht erkennen, dass der wichtigste Punkt im Front-End bei domänenübergreifenden Anfragen ist withCredentials:true Diese Aussage ist In Kombination mit dem im Hintergrund festgelegten „Access“ -Control-Allow-Credentials“ kann „true“ Cookies in domänenübergreifenden Ajax-Anfragen übertragen.

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

Antwort auf die Preflight-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 Attribut „withCredentials“ gesteuert.

Nachdem ich relevante Informationen konsultiert hatte, stellte ich fest, dass der Grund darin liegt, den domänenübergreifenden Code „response.setHeader(“Access-Control-Allow-Origin „im Hintergrund“, „*“); Dieser Teil steht im Konflikt mit dem Teil zum Einrichten domänenübergreifender Cookies. Nachdem ich die relevanten Informationen überprüft habe, stellte ich fest, dass beim Einrichten domänenübergreifender Ajax-Anfragen die Zugriffskontrolle erfolgt -Allow-Origin muss angegeben werden, was bedeutet, dass der Wert nicht * sein kann. Wenn ich jedoch daran denke, dass sich die Front-End-IP ändert, wenn Front-End und Back-End getrennt werden, habe ich das Gefühl, wieder beim Original zu sein Punkt: Kann diese Methode nicht verwendet werden, 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:

Analyse der Middleware des Express-Frameworks in NodeJS und der Methoden app.use und app.get

angular1 Studiennotizen, die den Prozess der Ansichtsmodellsynchronisierung in AngularJS enthalten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine domänenübergreifende Ajax-Anfrage mit Cookies. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!