Ajax 도메인 간 요청에 쿠키를 첨부하는 방법

이번에는 Ajax 크로스 도메인 접속 시 쿠키 손실 문제를 해결하는 방법을 알려드리겠습니다. 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");

코드의 윗부분은 크로스 도메인 문제를 해결하기 위한 코드이고, 두 번째 부분은 of response.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라는 것을 쉽게 알 수 있습니다. 백그라운드 -Allow-Credentials", "true"에 설정된 "Access-Control"은 도메인 간 Ajax 요청에서 쿠키를 전달할 수 있습니다.

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

실행 전 요청에 대한 응답이 액세스 제어 확인을 통과하지 못합니다. 와일드카드 '*'는 사용할 수 없습니다. 자격 증명 플래그가 true일 때 'Access-Control-Allow-Origin' 헤더에 사용됩니다. 따라서 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");

관련 권장 사항:

JavaScript(Ajax) 및 쿠키의 동일 출처 정책

Ajax 도메인 간 요청은 쿠키를 허용하지 않습니다

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