Comment attacher des cookies aux requêtes inter-domaines ajax

Cette fois, je vais vous montrer comment résoudre le problème de perte de cookies lors de l'accès inter-domaines Ajax. Quelles sont les précautions pour résoudre le problème de perte de cookies lors de l'accès inter-domaines Ajax ? jetez un oeil.

Dans le développement réel du projet, nous rencontrerons toujours des projets où le front-end et le back-end sont séparés. Dans de tels projets, le cross-domain est le premier problème à résoudre. Il est également très important, cependant, que la méthode de combinaison de session et de cookie soit généralement utilisée pour enregistrer les informations utilisateur en arrière-plan. Cependant, dans la situation réelle du front-end, l'ajax généré à travers les domaines ne peut pas transporter les informations sur les cookies, ce qui conduit. à la perte des informations de session et d'utilisateur du cookie. Le mode de stockage est affecté, comment résoudre un tel problème en consultant les informations, je prendrai comme exemple la requête ajax dans $http d'angularJS.

Tout d'abord, en arrière-plan, j'utilise le filtre de servlet pour intercepter toutes les requêtes et définir l'en-tête de la requête :

	// 解决跨越问题

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

La partie supérieure du code est le code pour résoudre le problème inter-domaines, et la deuxième partie de réponse.setHeader("Access-Control-Allow-Credentials", "true"); porté dans le backend.

Code frontal :

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

À partir du code ci-dessus, il n'est pas difficile de savoir que dans les requêtes inter-domaines Le point le plus important sur le front-end est withCredentials:true. Cette instruction combinée avec les paramètres "Access-Control-Allow-Credentials" et "true" en arrière-plan peut transporter des cookies dans les requêtes ajax inter-domaines.

Cependant, j'ai trouvé quelques problèmes lorsque je l'ai testé Lorsque la demande a été envoyée, le navigateur a signalé l'erreur suivante

Réponse au contrôle en amont. La demande ne réussit pas le contrôle de contrôle d'accès : un caractère générique "*" ne peut pas être utilisé dans l'en-tête "Access-Control-Allow-Origin" lorsque l'indicateur d'informations d'identification est vrai. L'origine "null" n'est donc pas autorisée à accéder. Le mode d'un XMLHttpRequest est contrôlé par l'attribut withCredentials.

Après avoir consulté les informations pertinentes, j'ai découvert que la raison est de résoudre le code inter-domaines réponse.setHeader("Access-Control- Allow-Origin", "*"); Cette partie est en conflit avec la partie de configuration des cookies inter-domaines. Après avoir vérifié les informations pertinentes, j'ai constaté que lors de la configuration des requêtes ajax inter-domaines pour transporter des cookies, Access-Control- Allow-Origin doit être spécifié. Cela signifie que sa valeur ne peut pas être *. Cependant, lorsque vous pensez que l'adresse IP du front-end change lorsque le front-end et le back-end sont séparés, vous avez l'impression de revenir au point d'origine. . Ne ​​pouvez-vous pas utiliser cette méthode pour résoudre le problème du cross-domain ajax et du transport de cookies ?

Ensuite, lors des recherches sur les requêtes ajax que j'ai effectuées, j'ai découvert que dans angulaireJS, la valeur de l'en-tête de requête Origin dans chaque requête est "nulle". Qu'est-ce que cela signifie ? J'ai donc changé l'arrière-plan "Access-Control-Allow-Origin", "*" en "Access-Control-Allow-Origin", "null", et la chose suivante est devenue merveilleuse, toutes les requêtes ajax ont réussi. Le cookie qui l'accompagne a réussi. atteint son objectif.

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

Recommandations associées :

JavaScript (Ajax) et politique de même origine des cookies

La requête inter-domaines Ajax n'autorise pas les cookies

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!