ローカルで使用する場合、すべてが正常です。バックエンド プロジェクトとフロントエンド プロジェクトの両方がサーバーにデプロイされ、バックエンド プロジェクトが配置された後はすべてが正常です。ローカル フロントエンド プロジェクトがサーバーにデプロイされ、クロスドメイン アクセスがクロスドメイン アクセスを許可するように設定されている場合、サーバー上でバックエンド プロジェクト インターフェイスを使用すると、問題が発生します。 postman は、イメージ検証コードを取得するためのインターフェイスをテストし、イメージ検証コード インターフェイスを検証します。これは正常です。
次に、インターフェイスを使用して HTML で画像検証コードを取得すると、正常に動作します。最後に、インターフェイスを使用して JS で画像検証コードを検証しますが、エラーが発生します。 ！ ！
分析
問題の説明から、問題がドメイン全体で発生していることがわかります。したがって、可能性は 2 つあり、1 つはクロスドメイン設定が間違っているため、もう 1 つは thinkphp 自体の問題が原因です。
別のクロスドメイン構成を使用しても、問題は依然として存在します。これは thinkphp 自体の問題で、情報を検索したところ、問題は thinkphp のセッション クロスドメインにあることがわかりました。
クロスサブドメイン ソリューション
実際、ThinkPHP であっても PHP 自体であっても、セッションのクロスドメインの問題を解決する場合は session.cookie_domain を設定する必要があります。
クロスドメイン セッションの問題の解決策には主に次のようなものがあります:
最初のケース: ディレクトリに .htaccess ファイルがない場合、つまり URL が疑似静的でない場合, 次に、conf/config.php の 1 行目に次のように追加します:
ini_set('session.cookie_domain',".domain.com");//跨域访问Session
ログイン後にコピー
デバッグを有効にすると使用できるようになります。ただし、デバッグがオフになっている場合は機能しません。
2 番目のケース: ディレクトリに .htaccess ファイルがある場合は、ルート ディレクトリに、index.php の最初の行を追加します。
この方法では、が有効かどうかに関係なく、デバッグに使用できます。
しかし、私たちの問題はクロスサブドメインの問題ではなく、完全にクロスドメインの問題であるため、上記の方法は無効です。
完全なクロスドメイン ソリューション
イメージ検証コードの取得リクエスト
リクエスト情報を表示してイメージ検証コードを取得します。リクエスト ヘッダーは次のとおりです:
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
ログイン後にコピー
検証検証コード リクエスト
検証検証コードのリクエスト情報を表示します。リクエスト ヘッダーは:
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
ログイン後にコピー
レスポンス ヘッダーは次のとおりです:
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
ログイン後にコピー
3 つのリクエストの比較
#画像検証コード リクエストを初めて取得するときは、Cookie に PHPSESSID がありません。したがって、戻り情報には Set-Cookie が含まれます。 2 回目の画像認証コード取得リクエストでは、Cookie に PHPSESSID が含まれているため、戻り情報に Set-Cookie は含まれません。
そして、最初のリクエストで返される情報 Set-Cookie 内の PHPSESSID は、2 番目のリクエストのリクエスト情報 Cookie 内の PHPSESSID と同じです。
画像検証コードを検証するajaxリクエストにはCookieがなく、当然PHPSESSIDもないため、戻り情報にもSet-Cookieが含まれます。
Cookie を使用してリクエストを送信するには、フロントエンドでいくつかの変更を加える必要があることがわかります。
フロントエンド jquery 設定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<p>
<img src="http://api.voidking.com/owner-bd/index.php/Home/CheckCode/getPicCode" 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(){
$('#send').click(function(){
//console.log(document.cookie);
$.ajax({
url: 'http://api.voidking.com/owner-bd/index.php/Home/CheckCode/checkPicCode',
type: 'POST',
crossDomain: true,
xhrFields: {
withCredentials: true
},
dataType: 'json',
data: {code: $('#picCode').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.
ログイン後にコピー
クロスドメイン エラーが発生しました。クロスドメイン Cookie を受信できるように、バックエンドもいくつかの変更を加える必要があります。
バックエンド 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 リクエストは正常に実行され、Cookie を送信できるようになり、バックエンドは正常にデータを受信してデータを返します。
Angular の ajax リクエストは jquery とは異なるため、Angular が Cookie を含むクロスドメイン リクエストをどのように送信するかを研究する必要もあります。
フロントエンドの角度設定
<!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="http://api.voidking.com/owner-bd/index.php/Home/CheckCode/getPicCode" alt="">
<input type="text" id="picCode" ng-model="picCode">
<input type="button" ng-click="send()" value="验证">
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $httpParamSerializer) {
$scope.send = function(){
$http({
method:'POST',
url:'http://api.voidking.com/owner-bd/index.php/Home/CheckCode/checkPicCode',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
withCredentials: true,
dataType: 'json',
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>ログイン後にコピー
"
以上がthinkphp でのセッションのクロスドメイン問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
