thinkphp中session跨域問題

時間 2019-12-08

原文原文鏈接

問題描述

《thinkphp實現短信驗證註冊》中，小編不止記錄了短信驗證碼的實現方法，同時還記錄了圖片驗證碼的實現方法。
本地使用，一切正常；後端項目和前端項目都部署到服務器，一切正常；後端項目部署到服務器，並設置容許跨域訪問後，本地前端項目使用服務器上後端項目接口時，問題來了：
首先，使用postman測試獲取圖片驗證碼接口和驗證圖片驗證碼接口，正常。
而後，在html中使用獲取圖片驗證碼接口，正常；最後，在JS中使用驗證圖片驗證碼接口，出錯！！！javascript

分析

經過問題描述，咱們看出，問題出如今跨域上。那麼，有兩種可能，一種是由於跨域設置不正確；一種是由於thinkphp自己的問題。php

採用另一種跨域配置，問題依然存在。那就是thinkphp自己的問題了，經查找資料，問題定位在thinkphp的session跨域上。html

跨子域解決辦法

其實無論是ThinkPHP仍是php自己，在解決session跨域問題的時候都須要設置session.cookie_domain。
針對session跨域這一問題的解決方法主要有如下幾種：
第一種狀況：若是目錄下沒有.htaccess這個文件，也就是沒有采起url僞靜態的話，那麼，在conf/config.php的第一行加上：前端

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

這時若是你開啓了調試，那麼能夠用！但關閉了調試，就無論用了！java

第二種狀況：若是你目錄下有.htaccess這個文件，那麼你在根目錄，index.php的第一行加入：jquery

<?php ini_set('session.cookie_domain',".domain.com");//跨域訪問Session // 應用入口文件 ?>

這種方法無論開不開啓調試都管用！nginx

然而，咱們的問題並非跨子域的問題，而是徹底跨域，因此上述方法無效。web

徹底跨域解決辦法

獲取圖片驗證碼請求

查看獲取圖片驗證碼的請求信息，Request Headers爲：ajax

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爲：thinkphp

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 lang="zh"> <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的跨域請求。

前端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="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>