首頁 php框架 ThinkPHP thinkphp中session跨域問題解決

thinkphp中session跨域問題解決

Jun 01, 2020 am 09:10 AM
thinkphp

thinkphp中session跨域問題解決

本地使用,一切正常;後端專案和前端專案都部署到伺服器,一切正常;後端專案部署到伺服器,並設定允許跨網域存取後,本地前端專案使用伺服器上後端項目接口時,問題來了:

首先,使用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
登入後複製

三次要求比較

thinkphp中session跨域問題解決

第一次取得圖片驗證碼請求,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/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 &#39;*&#39; cannot be used in the &#39;Access-Control-Allow-Origin&#39; header when the credentials flag is true. Origin &#39;http://localhost&#39; 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/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中session跨域問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

thinkphp專案怎麼運行 thinkphp專案怎麼運行 Apr 09, 2024 pm 05:33 PM

執行 ThinkPHP 專案需要:安裝 Composer;使用 Composer 建立專案;進入專案目錄,執行 php bin/console serve;造訪 http://localhost:8000 查看歡迎頁面。

thinkphp有幾個版本 thinkphp有幾個版本 Apr 09, 2024 pm 06:09 PM

ThinkPHP 擁有多個版本,針對不同 PHP 版本而設計。主要版本包括 3.2、5.0、5.1 和 6.0,而次要版本用於修復 bug 和提供新功能。目前最新穩定版本為 ThinkPHP 6.0.16。在選擇版本時,需考慮 PHP 版本、功能需求和社群支援。建議使用最新穩定版本以獲得最佳性能和支援。

thinkphp怎麼運行 thinkphp怎麼運行 Apr 09, 2024 pm 05:39 PM

ThinkPHP Framework 的本機運作步驟:下載並解壓縮 ThinkPHP Framework 到本機目錄。建立虛擬主機(可選),指向 ThinkPHP 根目錄。配置資料庫連線參數。啟動 Web 伺服器。初始化 ThinkPHP 應用程式。存取 ThinkPHP 應用程式 URL 運行。

laravel和thinkphp哪個好 laravel和thinkphp哪個好 Apr 09, 2024 pm 03:18 PM

Laravel 和 ThinkPHP 框架的效能比較:ThinkPHP 效能通常優於 Laravel,專注於最佳化和快取。 Laravel 性能良好,但對於複雜應用程序,ThinkPHP 可能更適合。

開發建議:如何利用ThinkPHP框架實現非同步任務 開發建議:如何利用ThinkPHP框架實現非同步任務 Nov 22, 2023 pm 12:01 PM

《開發建議:如何利用ThinkPHP框架實現非同步任務》隨著網路技術的快速發展,Web應用程式對於處理大量並發請求和複雜業務邏輯的需求也越來越高。為了提高系統的效能和使用者體驗,開發人員常常會考慮利用非同步任務來執行一些耗時操作,例如發送郵件、處理文件上傳、產生報表等。在PHP領域,ThinkPHP框架作為一個流行的開發框架,提供了一些便捷的方式來實現非同步任務。

thinkphp怎麼安裝 thinkphp怎麼安裝 Apr 09, 2024 pm 05:42 PM

ThinkPHP 安裝步驟:準備 PHP、Composer、MySQL 環境。使用 Composer 建立專案。安裝 ThinkPHP 框架及相依性。配置資料庫連線。產生應用程式碼。啟動應用程式並造訪 http://localhost:8000。

thinkphp效能怎麼樣 thinkphp效能怎麼樣 Apr 09, 2024 pm 05:24 PM

ThinkPHP 是一款高效能的 PHP 框架,具備快取機制、程式碼最佳化、平行處理和資料庫最佳化等優勢。官方性能測試顯示,它每秒可處理超過 10,000 個請求,實際應用中被廣泛用於京東商城、攜程網等大型網站和企業系統。

開發建議:如何利用ThinkPHP框架進行API開發 開發建議:如何利用ThinkPHP框架進行API開發 Nov 22, 2023 pm 05:18 PM

開發建議:如何利用ThinkPHP框架進行API開發隨著網際網路的不斷發展,API(ApplicationProgrammingInterface)的重要性也日益凸顯。 API是不同應用程式之間進行通訊的橋樑,它可以實現資料共享、功能呼叫等操作,為開發者提供了相對簡單且快速的開發方式。而ThinkPHP框架作為一款優秀的PHP開發框架,具有高效能、可擴展且易用

See all articles