祭奠那些葬送在MUI搭建的webApp跨域問題上的青春

時間 2019-11-07

標籤祭奠那些葬送 mui 搭建 webapp 問題青春欄目無線简体版

原文原文鏈接

一.緣起

當初我也不知道是哪裏不舒服,發神經選了這個***題目.個人題目告訴我要寫一個移動端的項目,好嘛,移動端,一直把前端吹得無所不能的我,怎麼可能會被他給難住,我三兩下子就能搞好信不信,這前端的界面和後臺的邏輯處理都不是大問題,首先我想要知道的是前臺和後臺是否能對接起來,在前端能不能把後臺的數據讀取出來,這纔是最關鍵的地方,因而我就開始了做死之路...javascript

二.開發環境

前端框架:MUIphp

後臺框架:TP5.1css

後臺環境:phpstudyhtml

數據庫:mysql前端

開發工具:HBuildervue

交互形式:接口java

三.數據庫處理

爲了測試簡單化,我在數據庫中新建了一張簡單的用戶表mysql

四.後臺處理

我使用的是TP5.1,下面要作的工做就是鏈接數據庫,製做接口web

1.修改TP5.1的config目錄下的database.php文件,進行鏈接數據庫,這裏本身看參數配置ajax

2.在index控制器中寫一個簡單的測試方法

//測試接口
    public function testinterface() {
       $res= Db::table('user')->select();//獲取用戶表全部數據
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功獲取"];//整理數據

        return json($result);//返回json數據
    }
複製代碼

好了,這就是咱們的接口,作好了,如今測試一下,在瀏覽器中是否能夠訪問,也就是運行該方法看看可否正常返回數據

3.瀏覽器中訪問接口

這裏說明一下,我已經在phpstudy中配置好了一個新的站點web2.com

因此我在瀏覽器的地址欄中輸入

http://www.web2.com/index.php/index/index/testinterface
複製代碼

數據返回正常,說明這個接口時沒有問題的

五.前臺處理

1.新建webApp項目

打開HBuilder,點擊文件,新建一個移動App項目,選擇的模板是mui項目,完成

2.新建測試頁面testinterpace.html

在剛纔建立的移動App項目的根目錄下,新建HTML文件,選擇含mui的html,完成

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="test"><button id="btntest">發起請求</button></div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/fn_back.js"></script>
		<script type="text/javascript"> // MUI頁面初始化函數 mui.init({ /*設置各類手勢操做的開關*/ gestureConfig:{ tap: true, //默認爲true doubletap: true, //默認爲false longtap: true, //默認爲false wipe: true, //默認爲true drag: true, //默認爲true hold:false,//默認爲false，不監聽 release:false//默認爲false，不監聽 } }); //給按鈕綁定一個方法用來發起ajax請求  mui(".test").on('click','#btntest',function(){ mui.ajax({ url : 'http://www.web2.com/index.php/index/index/testinterface',//請求路徑； type : 'get',//表示調用get方法請求； dataType:'json',//表示以json形式接受返回參數 success : function(data){//請求成功，返回函數 console.log("success"); }, error : function(xhr,type,errorThrown){//請求失敗，返回函數 alert("erro"); } }); }); </script>
	</body>

</html>
複製代碼

3.瀏覽器測試

在瀏覽器中運行testinterpace.html,點擊頁面中的按鈕

好了,出現下面的問題,這將是咱們慘案的開始

很明顯,跨域問題

六.後臺處理跨域

通常來講,咱們在製做接口的時候,就要考慮該接口的跨域問題,下面我修改index控制器中的測試方法

//測試接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功獲取"];
		// 設置響應頭
        $headers = [
            'Access-Control-Allow-Origin'=>'*',
            'Access-Control-Allow-Methods'=>'*',
            'Access-Control-Allow-Credentials'=>'false',
            'Access-Control-Allow-Headers'=>'content-type'
        ];		
        return json($result)->header($headers);
    }
複製代碼

這個解決方案叫作CORS方案

原理比較複雜，我不作解釋 ,可是實現比較簡單：

瀏覽器端都有瀏覽器自動完成，咱們無需操心
服務端添加一些頭信息就能夠

七.從新瀏覽器測試

世紀慘案,仍是報和沒有作跨域處理以前同樣的錯誤,到了這裏就開始尋找另外一種解決方案,通過大量的查找資料,發現,事實上，TP5.1已經幫咱們寫好了CORS的跨域, 只須要在路由的後面加上allowCrossDomain()就能夠了

八.添加路由

在添加路由以前,要把以前作的CORS跨域處理註釋或者刪掉

//測試接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功獲取"];
        return json($result);
    }
複製代碼

在TP5.1根目錄下route目錄下的route.php文件中,添加下列代碼

Route::get("/testinterface","index/index/testinterface")->allowCrossDomain();
複製代碼

九.從新瀏覽器測試

依然沒有解決問題,仍是同樣的錯誤,跨域問題沒有解決

十.漫長的查資料過程

到了這裏,個人心裏是絕望的,由於在上面兩個嘗試的解決方案出來以前,也是查了不少的資料,不斷的測試,這兩個方案在vue環境中發起ajax請求是能夠正常解決問題的,等我有空,我再寫一篇文章總結一下在vue中是怎麼配合這兩種方案的,可是爲何在MUI中就不行了呢?

我開始把注意力轉到前端,莫不是個人ajax代碼寫的有問題,仍是前端也要作一些處理

HBuilder社區有人討論了這個問題,對於解決方案,有些人隻言片語,又不斷測試一波,仍是沒有解決,搞得我都想打他們了,測試就是這樣,感受就是無底洞,搞了一天沒有搞好

因而,我只能回去看看文檔關於ajax的介紹了,最後在文檔中看到發起請求時能夠設置crossDomain:true,使得強制跨域

十一.修改前端`ajax`

注意請求路徑修改爲路由的配置的路徑

mui(".test").on('click','#btntest',function(){
    mui.ajax({
        url : 'http://www.web2.com/index.php/testinterface',//請求路徑；
        type : 'get',//表示調用get方法請求；
        crossDomain:true,//開啓強制跨域
        dataType:'json',//表示以json形式接受返回參數
        success  : function(data){//請求成功，返回函數
            console.log(data);

       },
        error  : function(xhr,type,errorThrown){//請求失敗，返回函數
            alert("erro"); 
        }
    });
 });
複製代碼

十二.從新瀏覽器測試

成功返回數據

耗時兩天時間,終於成功返回數據了,感動到****

十三.對比測試

1.下面我開始測試:

關閉路由,從新在index控制器中的測試方法添加回CORS跨域解決方案的代碼,而且,在前端ajax代碼的接口路徑也給恢復成非路由的形式,從新測試看看是否能夠成功返回數據

關閉路由

//Route::get("/testinterface","index/index/testinterface")->allowCrossDomain();
複製代碼

添加CORS跨域解決方案的代碼

//測試接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功獲取"];
		// 設置響應頭
        $headers = [
            'Access-Control-Allow-Origin'=>'*',
            'Access-Control-Allow-Methods'=>'*',
            'Access-Control-Allow-Credentials'=>'false',
            'Access-Control-Allow-Headers'=>'content-type'
        ];		
        return json($result)->header($headers);
    }
複製代碼

修改前端ajax的url爲

url : 'http://www.web2.com/index.php/index/index/testinterface',//請求路徑；
複製代碼

結果

返回跨域的錯誤提示

2.下面我開始測試:

打開路由,註釋在index控制器中的測試方法中的CORS跨域解決方案的代碼,而且,在前端ajax代碼的接口路徑使用路由配置的路徑

打開路由

Route::get("/testinterface","index/index/testinterface")->allowCrossDomain();
複製代碼

註釋CORS跨域解決方案的代碼

//測試接口
    public function testinterface() {
       $res= Db::table('user')->select();
        //dump($res) ;
        $result=["data"=>$res,"status"=>"200","msg"=>"成功獲取"];
// $headers = [
// 'Access-Control-Allow-Origin'=>'*',
// 'Access-Control-Allow-Methods'=>'*',
// 'Access-Control-Allow-Credentials'=>'false',
// 'Access-Control-Allow-Headers'=>'content-type'
// ];
// return json($result)->header($headers);
        return json($result);
    }
複製代碼

修改前端ajax的url爲

url : 'http://www.web2.com/index.php/testinterface',//請求路徑；
複製代碼

結果

成功返回數據

下面我開始測試:

鏈接手機,真機測試是否能夠返回數據,這裏怎麼實現真機測試,不作介紹,能夠查看HBuilder webApp文檔,通過測試,能夠正常返回數據

十四.結論

MUI搭建的webApp是怎麼實現和TP5.1框架實現對接數據的呢?

前端ajax發起請求時要設置crossDomain:true,後臺使用路由結合TP5.1封裝好的方法allowCrossDomain()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。