本地使用，一切正常；後端專案和前端專案都部署到伺服器，一切正常；後端專案部署到伺服器，並設定允許跨網域存取後，本地前端專案使用伺服器上後端項目接口時，問題來了：
首先，使用postman測試獲取圖片驗證碼接口和驗證圖片驗證碼接口，正常。
然後，在html中使用獲取圖片驗證碼接口，正常；最後，在JS中使用驗證圖片驗證碼接口，出錯！ ！ ！
分析
透過問題描述，我們看出，問題出現在跨域上。那麼，有兩種可能，一種是因為跨域設定不正確；一種是因為thinkphp本身的問題。
採用另外一種跨域配置，問題依然存在。那就是thinkphp本身的問題了，經過查找資料，問題定位在thinkphp的session跨域上。
跨子網域解決方法
其實不管是ThinkPHP還是php本身，在解決session跨域問題的時候都需要設定session.cookie_domain。
針對session跨域這一問題的解決方法主要有以下幾種：
第一種情況：如果目錄下沒有.htaccess這個文件，也就是沒有採取url偽靜態的話，那麼，在conf/config.php的第一行加上：
ini_set('session.cookie_domain',".domain.com");//跨域访问Session
這時如果你開啟了調試，那麼可以用！但關閉了調試，就不管用了！
第二種情況：如果你目錄下有.htaccess這個文件，那麼你在根目錄，index.php的第一行加入：
這個方法不管開不開啟調試都管用！
然而，我們的問題並不是跨子域的問題，而是完全跨域，所以上述方法無效。
完全跨域解決方案
取得圖片驗證碼請求
查看獲取圖片驗證碼的請求信息，Request Headers為：
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
Response Headers為：
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 Headers為：
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
Response Headers為：
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
再次取得圖片驗證碼請求
#Request Headers為：
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 Headers為：
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。第二次取得圖片驗證碼請求，Cookie中含有PHPSESSID，所以，回傳訊息中沒有了Set-Cookie。
而且第一次要求回傳訊息Set-Cookie中的PHPSESSID，和第二次請求請求訊息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="/static/imghwm/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(){
$('#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的跨域請求。
前端angular設定
<!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/imghwm/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('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>推薦教學：《TP5》
以上是thinkphp中session跨域問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！
ThinkPHP內置測試框架的關鍵功能是什麼？Mar 18, 2025 pm 05:01 PM本文討論了ThinkPHP的內置測試框架，突出了其關鍵功能（例如單元和集成測試），以及它如何通過早期的錯誤檢測和改進的代碼質量來增強應用程序可靠性。
在無服務器體系結構中使用ThinkPHP的關鍵注意事項是什麼？Mar 18, 2025 pm 04:54 PM本文討論了在無服務器體系結構中使用ThinkPHP的關鍵注意事項，專注於性能優化，無狀態設計和安全性。它突出了諸如成本效率和可擴展性之類的收益，但也應對挑戰
如何在ThinkPHP微服務中實現服務發現和負載平衡？Mar 18, 2025 pm 04:51 PM本文討論了在ThinkPHP微服務中實施服務發現和負載平衡，重點是設置，最佳實踐，集成方法和推薦工具。[159個字符]
ThinkPHP依賴性注入容器的高級功能是什麼？Mar 18, 2025 pm 04:50 PMThinkPHP的IOC容器提供了高級功能，例如懶惰加載，上下文綁定和方法注入PHP App中有效依賴性管理的方法。Character計數：159
使用ThinkPHP來構建SaaS應用程序的主要好處是什麼？Mar 18, 2025 pm 04:46 PMThinkPHP具有輕巧的設計，MVC架構和可擴展性。它通過各種功能提高可擴展性，加快開發並提高安全性。
如何使用ThinkPHP和RabbitMQ構建分佈式任務隊列系統？Mar 18, 2025 pm 04:45 PM本文概述了使用ThinkPhp和RabbitMQ構建分佈式任務隊列系統，重點是安裝，配置，任務管理和可擴展性。關鍵問題包括確保高可用性，避免常見的陷阱，例如不當
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
記事本++7.3.1
好用且免費的程式碼編輯器
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
