ローカルで使用する場合、すべてが正常です。バックエンド プロジェクトとフロントエンド プロジェクトの両方がサーバーにデプロイされ、バックエンド プロジェクトが配置された後はすべてが正常です。ローカル フロントエンド プロジェクトがサーバーにデプロイされ、クロスドメイン アクセスがクロスドメイン アクセスを許可するように設定されている場合、サーバー上でバックエンド プロジェクト インターフェイスを使用すると、問題が発生します。 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
#画像検証コード リクエストを初めて取得するときは、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;
バックエンド nginx がセットアップされると、jquery の ajax リクエストは正常に実行され、Cookie を送信できるようになり、バックエンドは正常にデータを受信してデータを返します。
Angular の ajax リクエストは jquery とは異なるため、Angular が Cookie を含むクロスドメイン リクエストをどのように送信するかを研究する必要もあります。
フロントエンドの角度設定以上がthinkphp でのセッションのクロスドメイン問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。<!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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
