本地使用,一切正常;后端項目和前端項目都部署到服務器,一切正常;后端項目部署到服務器,并設置允許跨域訪問后,本地前端項目使用服務器上后端項目接口時,問題來了:
首先,使用postman測試獲取圖片驗證碼接口和驗證圖片驗證碼接口,正常。
然后,在html中使用獲取圖片驗證碼接口,正常;最后,在JS中使用驗證圖片驗證碼接口,出錯!!!
分析
通過問題描述,我們看出,問題出現在跨域上。那么,有兩種可能,一種是因為跨域設置不正確;一種是因為thinkphp本身的問題。
立即學習“PHP免費學習筆記(深入)”;
采用另外一種跨域配置,問題依然存在。那就是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的第一行加入:
<?php ini_set('session.cookie_domain',".domain.com");//跨域訪問Session // 應用入口文件 ?>
這種方法不管開不開啟調試都管用!
然而,我們的問題并不是跨子域的問題,而是完全跨域,所以上述方法無效。
完全跨域解決辦法
獲取圖片驗證碼請求
查看獲取圖片驗證碼的請求信息,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設置
nbsp;html> ????<meta> ????<title>jquery</title> ????<p> ????????@@##@@ ????????<input> ????????<input> ????</p> <script></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>
請求時報錯如下:
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設置
nbsp;html> ????<meta> ????<title>angular</title> ????<script></script> ????<p> ????????@@##@@ ????????<input> ????????<input> ????</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>
推薦教程:《TP5》