집 > 기사 > 웹 프론트엔드 > 쿠키를 사용하여 Ajax 도메인 간 요청을 구현하는 방법

쿠키를 사용하여 Ajax 도메인 간 요청을 구현하는 방법

不言원래의: 2018-09-10 14:29:021557검색

이 문서의 내용은 쿠키를 사용하여 Ajax 도메인 간 요청을 구현하는 방법에 대한 것입니다. 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

실제 프로젝트를 개발하다 보면 프런트엔드와 백엔드가 분리되어 있는 프로젝트를 항상 접하게 됩니다. 이러한 프로젝트에서는 크로스 도메인이 가장 먼저 해결해야 할 문제입니다. 게다가 사용자 정보를 저장하는 것도 매우 중요합니다. 그러나 세션과 쿠키를 결합하는 방법은 일반적으로 백그라운드에서 사용자 정보를 저장하는 데 사용됩니다. 그러나 실제 프런트 엔드의 상황에서는 크로스 도메인 ajax가 쿠키 정보를 전달할 수 없으므로 사용자 정보 저장 모드가 발생합니다. 영향을 받는 세션 및 쿠키 문제를 해결하는 방법은 무엇입니까? 정보를 참고하여 AngleJS의 $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");

코드 상단은 크로스 도메인 문제를 해결하기 위한 코드이고, 응답의 두 번째 부분은 .setHeader("Access-Control -Allow-Credentials", "true"); 이는 쿠키가 백엔드에서 전달되도록 허용하는 코드입니다.

프런트엔드 코드:

$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 요청에서 쿠키를 전달할 수 있습니다.

그러나 테스트 중에 몇 가지 문제를 발견했습니다. 요청이 전송되었을 때 브라우저에서 다음 오류를 보고했습니다.

실행 전 요청에 대한 응답이 액세스 제어 확인을 통과하지 못했습니다. '액세스'에서 와일드카드 '*'를 사용할 수 없습니다. -Control-Allow-Origin' 헤더는 자격 증명 플래그가 true인 경우 Origin 'null'에 대한 액세스가 허용되지 않습니다. XMLHttpRequest의 모드는 withCredentials 속성에 의해 제어됩니다.

관련 정보를 살펴본 후 그 이유는 크로스 도메인 코드 response.setHeader("Access-Control-Allow-Origin", "*" ) 백그라운드에서 ;이 부분은 크로스 도메인 쿠키 설정 부분과 충돌합니다. 관련 정보를 확인한 결과 쿠키를 전달하기 위해 크로스 도메인 Ajax 요청을 설정할 때 Access-Control-Allow-Origin을 지정해야 한다는 것을 발견했습니다. 값이 *가 될 수 없다는 뜻입니다. 그런데 프런트엔드와 백엔드가 분리되었을 때 프런트엔드 IP가 바뀌는 것을 생각하면 다시 원점으로 돌아온 듯한 느낌이 듭니다. Ajax 도메인 간 문제와 쿠키 전달 문제를 해결하려면 어떻게 해야 할까요?

다음으로 제가 만든 Ajax 요청을 조사하는 동안 AngleJS에서 모든 요청의 Origin 요청 헤더 값이 "null"이라는 것을 발견했습니다. 그래서 배경 "Access-Control-Allow-Origin", "*"를 "Access-Control-Allow-Origin", "null"로 변경했고 다음 작업은 훌륭해졌습니다. 모든 Ajax 요청이 성공적으로 완료되었습니다. 목적을 달성했습니다.

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

쿠키를 사용하여 Ajax 도메인 간 요청을 구현하는 방법

관련 기사