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

不言
풀어 주다: 2018-09-10 14:29:02
원래의
1523명이 탐색했습니다.

이 문서의 내용은 쿠키를 사용하여 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: '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('网络或设置错误');
                    }
                })
            }
로그인 후 복사

위 코드에서 크로스 도메인 요청의 프런트엔드에서 가장 중요한 점이 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");
로그인 후 복사

관련 권장사항:

nodejs의 express 프레임워크 미들웨어 분석과 app.use 및 app.get 메소드

angular1 연구 노트, 여기에는Angularjs의 뷰 모델 동기화 프로세스가 포함되어 있습니다

위 내용은 쿠키를 사용하여 Ajax 도메인 간 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!