Comment implémenter une requête inter-domaines ajax avec des cookies

Le contenu de cet article explique comment implémenter des requêtes inter-domaines ajax avec des cookies. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans le développement réel du projet, nous rencontrerons toujours des projets avec séparation front-end et back-end Dans de tels projets, le cross-domain est le premier problème à résoudre. Enregistrer les informations utilisateur est également très important.Cependant, la méthode de combinaison de session et de cookie est généralement utilisée pour enregistrer les informations utilisateur en arrière-plan, dans la situation actuelle du front-end, l'ajax généré dans tous les domaines ne peut pas transporter les informations sur les cookies, ce qui conduit à l'erreur. problème de session et de cookie. Le mode de stockage des informations utilisateur 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 ci-dessus du code consiste à résoudre le problème inter-domaines Le code et la deuxième partie de réponse.setHeader("Access-Control-Allow-Credentials", "true"); est le code qui permet aux cookies d'être transportés dans le backend.

Code front-end :

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

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

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

La réponse à la demande de contrôle en amont 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 aux informations d'identification. Le mode d'un XMLHttpRequest est contrôlé par l'attribut withCredentials.

Après avoir consulté des informations pertinentes, j'ai découvert que la raison est de résoudre le code inter-domaines réponse.setHeader("Access-Control-Allow-Origin " en arrière-plan ", "*"); 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, le contrôle d'accès. -Allow-Origin doit être spécifié, ce qui signifie que la valeur ne peut pas être *. Cependant, quand je pense que l'adresse IP du front-end change lorsque le front-end et le back-end sont séparés, j'ai l'impression de revenir à l'original. Cette méthode ne peut-elle pas être utilisée 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 :

Interprétation du middleware du framework express dans nodejs et des méthodes app.use et app.get

notes d'étude angulaire1, qui contiennent le processus de synchronisation du modèle de vue dans angulairejs

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!