thinkphp에서 세션의 도메인 간 문제 해결

로컬에서 사용하면 백엔드 프로젝트와 프런트엔드 프로젝트가 모두 서버에 배포되고 백엔드 프로젝트가 서버에 배포되고 허용되도록 설정된 후에는 모든 것이 정상입니다. 교차 도메인 액세스, 로컬 프런트엔드 프로젝트가 서버의 백엔드 프로젝트 인터페이스를 사용할 때 다음과 같은 질문이 생깁니다.

먼저 Postman을 사용하여 이미지 확인 코드를 얻기 위한 인터페이스와 이미지 확인을 위한 인터페이스를 테스트합니다. 이미지 인증코드는 정상입니다.

그런 다음 인터페이스를 사용하여 HTML로 이미지 확인 코드를 얻으면 정상적으로 작동합니다. 마침내 인터페이스를 사용하여 JS에서 이미지 확인 코드를 확인하면 오류가 발생합니다! ! !

Analytics

문제 설명을 통해 도메인 전반에 걸쳐 문제가 발생하는 것을 확인할 수 있습니다. 따라서 두 가지 가능성이 있습니다. 하나는 크로스 도메인 설정이 잘못되었기 때문이고, 다른 하나는 thinkphp 자체에 문제가 있기 때문입니다.

다른 도메인 간 구성을 사용해도 문제가 여전히 존재합니다. 그것은 thinkphp 자체의 문제입니다. 정보를 검색한 결과 문제는 thinkphp의 세션 크로스 도메인에 있습니다.

교차 하위 도메인 솔루션

사실 ThinkPHP이든 PHP 자체이든 세션 교차 도메인 문제를 해결하려면 session.cookie_domain을 설정해야 합니다.
교차 도메인 세션 문제에 대한 주요 해결책은 다음과 같습니다.

첫 번째 경우: 디렉터리에 .htaccess 파일이 없는 경우, 즉 URL이 의사 정적이 아닌 경우 conf/config에 있습니다. .php 첫 번째 줄에 추가:

ini_set('session.cookie_domain',".domain.com");//跨域访问Session

이때 디버깅을 활성화하면 사용 가능합니다! 하지만 디버깅이 꺼지면 작동하지 않습니다!

두 번째 경우: 디렉터리에 .htaccess 파일이 있는 경우 루트 디렉터리에 index.php의 첫 번째 줄을 추가합니다.

<!--?php ini_set(&#39;session.cookie_domain&#39;,".domain.com");//跨域访问Session
// 应用入口文件
?-->

이 방법은 디버깅이 켜져 있는지 여부에 관계없이 작동합니다!

그러나 우리의 문제는 하위 도메인 간 문제가 아니라 완전히 도메인 간 문제이므로 위의 방법은 유효하지 않습니다.

교차 도메인 솔루션 완성

이미지 확인 코드 요청 받기

이미지 확인 코드를 받으려면 요청 정보를 확인하세요. 요청 헤더는 다음과 같습니다.

Accept:image/webp,image/*,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Cookie:pma_lang=zh_CN; pma_collation_connection=utf8_unicode_ci; pma_iv-1=wnpO4gv0eQRW1AMHmGr2ww%3D%3D; pmaUser-1=weZPqS0%2BW7nzFUVHRdqcfA%3D%3D
Host:api.voidking.com
Referer:http://localhost/ajax/ajax.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

응답 헤더는

Access-Control-Allow-Origin:*
Cache-Control:post-check=0, pre-check=0
Cache-Control:private, max-age=0, no-store, no-cache, must-revalidate
Connection:keep-alive
Content-Type:image/png
Date:Sun, 27 Nov 2016 12:10:44 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx
Set-Cookie:PHPSESSID=721t4sqanvsii550m1dk8gq1o3; path=/; domain=.voidking.com
Transfer-Encoding:chunked

확인 코드 확인 request

보기 인증 코드의 요청 정보를 확인하세요. 요청 헤더는

Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:9
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Host:api.voidking.com
Origin:http://localhost
Referer:http://localhost/ajax/ajax.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

응답 헤더는

Access-Control-Allow-Origin:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Sun, 27 Nov 2016 12:13:21 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx
Set-Cookie:PHPSESSID=149t0hhs2icqaaemvp39onkgp4; path=/; domain=.voidking.com
Transfer-Encoding:chunked
Vary:Accept-Encoding

이미지 인증 코드 요청을 다시 받으세요

요청 헤더는

Accept:image/webp,image/*,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Cookie:pma_lang=zh_CN; pma_collation_connection=utf8_unicode_ci; pma_iv-1=wnpO4gv0eQRW1AMHmGr2ww%3D%3D; pmaUser-1=weZPqS0%2BW7nzFUVHRdqcfA%3D%3D; PHPSESSID=721t4sqanvsii550m1dk8gq1o3
Host:api.voidking.com
Referer:http://localhost/ajax/ajax.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

Response입니다. 헤더는 다음과 같습니다.

Access-Control-Allow-Origin:*
Cache-Control:private, max-age=0, no-store, no-cache, must-revalidate
Cache-Control:post-check=0, pre-check=0
Connection:keep-alive
Content-Type:image/png
Date:Sun, 27 Nov 2016 13:26:21 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx
Transfer-Encoding:chunked

세 가지 요청 비교

처음 이미지 인증 코드 요청을 받을 때 쿠키에 PHPSESSID가 없으므로 반환 정보에 Set-Cookie가 포함됩니다. 두 번째 이미지 인증코드 획득 요청에서는 쿠키에 PHPSESSID가 포함되어 있으므로 반환 정보에 Set-Cookie가 포함되지 않습니다.

그리고 첫 번째 요청에서 반환된 Set-Cookie의 PHPSESSID는 두 번째 요청에서 요청된 정보 쿠키의 PHPSESSID와 동일합니다.

이미지 인증 코드를 확인하는 ajax 요청에는 쿠키가 없고 당연히 PHPSESSID도 없으므로 반환 정보에도 Set-Cookie가 포함되어 있습니다.

쿠키를 사용하여 요청을 보내려면 프런트 엔드에서 일부 수정이 필요하다는 것을 알 수 있습니다.

프런트엔드 jquery 설정

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
    <p>
        <img src="/static/imghw/default1.png"  data-src="http://api.voidking.com/owner-bd/index.php/Home/CheckCode/getPicCode"  class="lazy"   alt="">
        <input type="text" id="picCode">
        <input type="button" id="send" value="验证">
    </p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
        $(&#39;#send&#39;).click(function(){
            //console.log(document.cookie);
            $.ajax({
                url: &#39;http://api.voidking.com/owner-bd/index.php/Home/CheckCode/checkPicCode&#39;,
                type: &#39;POST&#39;,
                crossDomain: true,
                xhrFields: {
                    withCredentials: true
                },
                dataType: &#39;json&#39;,
                data: {code: $(&#39;#picCode&#39;).val()},
                success: function(data){
                    console.log(data);
                },
                error: function(xhr){
                    console.log(xhr);
                }
            });
        });
    });
</script>
</body>
</html>

요청 오류는 다음과 같습니다.

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.

크로스 도메인 오류가 발생했습니다. 크로스 도메인을 수신하려면 백엔드에서도 일부 수정이 필요한 것을 알 수 있습니다. 쿠키.

백엔드 nginx 설정

add_header Access-Control-Allow-Origin http://localhost;
add_header Access-Control-Allow-Credentials true;

참고:
서버 측 Access-Control-Allow-Credentials 매개변수가 true인 경우 Access-Control-Allow-Origin 매개변수의 값은 *일 수 없습니다.

백엔드 nginx가 설정되면 jquery의 ajax 요청이 정상적으로 이루어지며 백엔드에서 정상적으로 데이터를 수신하고 반환할 수 있습니다.

Angular의 ajax 요청은 jquery와 다르기 때문에 우리는 angle이 쿠키를 전달하는 도메인 간 요청을 어떻게 보내는지 연구해야 합니다.

프런트 엔드 각도 설정

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>angular</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" >
    <p ng-controller="myCtrl">
        <img src="/static/imghw/default1.png"  data-src="http://api.voidking.com/owner-bd/index.php/Home/CheckCode/getPicCode"  class="lazy"   alt="">
        <input type="text" id="picCode" ng-model="picCode">
        <input type="button" ng-click="send()"  value="验证">
    </p>
<script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;myCtrl&#39;, function($scope, $http, $httpParamSerializer) {
        $scope.send = function(){
            $http({
                method:&#39;POST&#39;,
                url:&#39;http://api.voidking.com/owner-bd/index.php/Home/CheckCode/checkPicCode&#39;,
                headers:{
                    &#39;Content-Type&#39;:&#39;application/x-www-form-urlencoded&#39;
                },
                withCredentials: true,
                dataType: &#39;json&#39;,
                data: $httpParamSerializer({code: $scope.picCode})
            }).then(function successCallback(response) {
                console.log(response.data);
                $scope.username = response.data.username;
            }, function errorCallback(response) {
                console.log(response.data);
            });
        }
    });
</script>

</body>
</html>

추천 튜토리얼: "TP5"

위 내용은 thinkphp에서 세션의 도메인 간 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!